Is a slider from google map (maps) wordpres possible and if so, how to implement it approximately?

Question

Google Maps

The designer placed a Google map on the contact page, with one address of the company (the company has three addresses). On the map there is a button in the inside of which there is an arrow "forward". And you need to do this: by clicking on the button, the card with one address changes to a card with a different address, and so on with each click. Of course, you can replace the map with pictures, but it somehow seems unprofessional to me. Maybe there is a similar plugin?

Answer 1

I wrote this script in a hurry, I hope you understand

(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);
    });
  }
})();