@user_tm

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

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

(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);
    });
  }
})();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы