0

С горем по полам собрал карту. Но не могу понять как выводить свой infowindow при клике на каждый маркер. Подскажите, пожалуйста!

   function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: 49.697722, lng: 33.225358},
          navigationControl: true,
   styles: [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#46bcec"
            },
            {
                "visibility": "on"
            }
        ]
    }
]  
});

   

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            icon: image
          });
          marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
        });


        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'http://spektrum.ua/images/placeholder'});
      }
    var image = 'http://spektrum.ua/images/placeholder.png';
      var locations = [
                {lat: 49.981919, lng: 36.232537},
                {lat: 49.964425, lng: 36.221476},
                {lat: 50.456978, lng: 30.437191},
                {lat: 48.448276, lng: 35.032237},
                
             
        {lat: 0, lng: 0}
      ]

   
 #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-4Y95P4YUPBuNj3LuiU-_YIuna4RhAiM&callback=initMap">
    </script>
<div id="map" style='height:400px;width:100%;'></div>

1 ответ 1

0
var coordInfoWindow = new google.maps.InfoWindow();
var windowPos = {lat: -25.363, lng: 131.044};
coordInfoWindow.setContent(createInfoWindowContent(windowPos, map.getZoom()));
coordInfoWindow.setPosition(windowPos);
coordInfoWindow.open(map);

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.