Возможен ли слайдер из google map (карт) wordpres и если да то как примерно его реализовать?

Question

[user_tm]

Дизайнер расположил на странице контактов гугл карту, с одним адресом компании (у компании три адреса). На карте есть кнопка в нутри которой есть стрелка «вперет». И нужно сделать так: кликнув по кнопке, карта с однм адресом, меняется на карту с другим адресом и так далее при каждом клике. Можно конечно заменить карту на картинки, но это как то не професионально мне кажится. Может существует подобный плагин?

Comments

[user_tm]

Ого огромное спасибо! хотя я не совсем все понял, так как освоил базовый уровень js не весь. Но как быть? Просто у меня тут кое что прояснилось и мой вопрос поменялся вот на такой: Как сделать переключение между несколькими адресами на Goole map api по нажатию одной кнопки. В wordpress? при этом у меня на wordpress тема vantage в которой есть папка js в ней файл maps.js в котором я инициализировал карту с одним маркером вот код:

jQuery(document).ready(function () {
        function initMap() {
            var myLatLng = {lat: 59.892821, lng: 30.329794};
            var map = new google.maps.Map(document.getElementById('solid-map'), {
              center: myLatLng,
              zoom: 17
            
            });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Цветочная улица 6'
            });
            
        }
        initMap();
   
    });

вот скриншот:

Так же я создал дочернею тему "vantage child theme" в ней создал файл fanction.php в котором я подключил вышеуказанный файл maps.js и Google map api вот так:

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
};

//add_action( 'admin_enqueue_scripts', 'my_scripts_method' ); //add_action( 'login_enqueue_scripts', 'my_scripts_method' ); add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); function my_scripts_method(){ wp_enqueue_script( 'newscript', get_template_directory_uri() . '/js/custom_script.js'); }
function my_scripts_method() {
    if( is_page_template( 'contacts.php' ) ){
	wp_enqueue_script( 'map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAWJGkx9LHL3HWrtypCC6FvY2453xvAtdo&callback=initMap');
	wp_enqueue_script( 'custom-map', get_template_directory_uri() . '/js/maps.js', array('jquery'), '', true);
}
	
};
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

вот скрин:

в дочерней теме так же имеется файл contacts.php в нем есть кнопка и контейнер для карты с id="solid-map" вот код

<?php
/*
Template Name: мои контакты
*/

get_header(); ?>

    <button id="1" style="padding:10px; cursor:pointer;">кнопка</button>
    
    <br>
    <br>
    <div id="solid-map"></div>
    

<?php get_footer(); ?>

во скрин
ну и в дочерней теме в файле style.css прописал для карты высоту вот код

/*
Theme Name: vantage child theme

Template: vantage
*/

#solid-map {
    height: 670px;
   
}

вот скрин

Answer 1

[WapSter]

Писал данный скрипт на скорую руку, надеюсь разберетесь

(function () {
  var titleOffice = $('.contact-map .cor'); // элемент на который кликаем имеет дата атрибуты data-map-lat и data-map-lng c координатами


  window.markers = [];
  if($('*').is('.map')) { // если существует блок .map

    var API_js_callback = "https://maps.googleapis.com/maps/api/js?key=ключ апи гугла&callback=initMap";
    var script = document.createElement('script');
    script.src = API_js_callback;
    document.body.appendChild(script);
    var locations = [];
    titleOffice.each(function (index) {
      locations.push({'lat': titleOffice.eq(index).data('mapLat'), 'lng': titleOffice.eq(index).data('mapLng'), 'id': index +1});
    });


    window.initMap = function () {

      //Set variables
      var icon = "img/active-map.png",
        activeIcon = "img/active-map.png",
        map = new google.maps.Map(
          document.querySelector('.map'), {
            zoom: 12,
            center: new google.maps.LatLng(locations[0].lat, locations[0].lng)
          });


      //Add markers
      for (var i = 0; i < locations.length; i++) {

        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
          map: map,
          title: locations[i].title,
          icon: icon,
          id: locations[i].id
        });

        //Add markers to array
        markers.push(marker);

        //Add click event on marker
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
            for (var j = 0; j < markers.length; j++) {
              markers[j].setIcon({
                url: icon,
                scaledSize: new google.maps.Size(64, 64)
              })
            }

            marker.setIcon({
              url: activeIcon,
              scaledSize: new google.maps.Size(64, 64)
            });

            map.panTo(marker.getPosition());
          };

        })(marker, i));
      }
    };

    window.updateMap = function (markerID) {

      markers.forEach(function (element, index) {
        if (element.id === markerID) {
          google.maps.event.trigger(markers[index], 'click');
          return false;
        }
      });
    };
    titleOffice.each(function (item) {
      $(this).on('click', function () {
        updateMap(item + 1);
      });
    });


    $(window).on('load', function () {
      updateMap(1);
    });
  }
})();