點擊時彈出的Google地圖自定義標記（信息窗口）

Question

我已經使用自定義標記自定義了Google Map。 我需要將Info Windows集成到每個標記中。

來自以下位置的自定義標記代碼： https : //developers.google.com/maps/documentation/javascript/custom-markers

嘗試從以下位置集成信息窗口 ： https ： //developers.google.com/maps/documentation/javascript/examples/infowindow-simple

這是我發現的一個相關問題（但並不是我想要的）： https : //stackoverflow.com/a/3059129/6191987

我的代碼如下：

  html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } 

 <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: new google.maps.LatLng(40.712696, -74.005019), mapTypeId: 'roadmap' }); var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { icon: iconBase + 'parking_lot_maps.png' }, library: { icon: iconBase + 'library_maps.png' }, info: { icon: iconBase + 'info-i_maps.png' } }; var features = [{ position: new google.maps.LatLng(40.712696, -74.005019), type: 'parking' }, { position: new google.maps.LatLng(40.712753, -74.006081), type: 'parking' }, { position: new google.maps.LatLng(40.713664, -74.007819), type: 'library' }]; // Create markers. features.forEach(function(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap"> </script> 

還添加了JSFiddle： https ://jsfiddle.net/vishnuprasadps/7g33j2kz/

Answer 1

您想把什么作為infoWindow的內容？

但這似乎可以解決問題：

<div id="map"></div>

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: new google.maps.LatLng(40.712696, -74.005019),
      mapTypeId: 'roadmap'
    });

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      parking: {
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        icon: iconBase + 'library_maps.png'
      },
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40.712696, -74.005019),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.712753, -74.006081),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(40.713664, -74.007819),
      type: 'library'
    }];

    var infowindow = new google.maps.InfoWindow({
      content: "test"
    });

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
      marker.addListener('click', function() {
        infowindow.open(map, marker);
      });
    });





  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">


</script>

https://jsfiddle.net/uqLxnyca/

祝你有美好的一天。