谷歌地图：点击标记时如何显示信息窗口答案

【问题标题】：Google Maps: How to display infowindows when you click on markers谷歌地图：点击标记时如何显示信息窗口
【发布时间】：2016-11-20 06:00:24
【问题描述】：

我是 Google Maps API 的新手，我认为我缺少一些基本的东西。我正在从 JSON 文件加载位置并在地图上创建标记。我希望能够单击标记并显示信息窗口。现在，当我单击标记时，什么都没有显示。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<title>ListingCharts3</title>
<style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
<div id="map"></div>

<script>
    var map;
    var infowindow;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'),
        {
            zoom: 4,
            center: new google.maps.LatLng(41, -96),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        map.data.loadGeoJson('https://DATA_FILE_URL.json');
    }

    // Loop through the results array and place a marker for each set of coordinates.
    window.eqfeed_callback = function (results) {
        for (var i = 0; i < results.features.length; i++) {
            var coords = results.features[i].geometry.coordinates;
            var latLng = new google.maps.LatLng(coords[1], coords[0]);
            var marker = new google.maps.Marker
            ({
                position: latLng,
                map: map,
                title: results.features[i].address
            });

            //var content = results.features[i].address;
            var content = "foo";

            var infowindow = new google.maps.InfoWindow()

            google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                return function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                };
            })(marker, content, infowindow));
        }
    }
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

朋友帮我解决了，这段代码有效：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(41, -96),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

    var infowindow = new google.maps.InfoWindow();

  map.data.loadGeoJson('https://JSON_FILE_URL.json', null, function (features) {

  map.data.addListener('click', function(event) {
  console.log(event);
      var myHTML =  event.feature.getProperty("address") + ", " + 
                                event.feature.getProperty("state") + ", " +
                    event.feature.getProperty("zipcode");
      infowindow.setContent("<div style='width:auto; text-align: center;'>" + myHTML + "</div>");
      infowindow.setPosition(event.feature.getGeometry().get());
      infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
      infowindow.open(map);
  });
 });
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">

【讨论】：

【解决方案2】：

我可以看到您加载了 GeoJSON 数据并使用了 Google Maps JavaScript API 的 data layer。我想知道您为什么不将事件用于数据层，例如：

map.data.addListener('click', function(event) {
    if (event.feature.getGeometry().getType() === 'Point') {
        //Here your stuff for info window
        var content = "foo";
        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent(content);
        infowindow.setPosition(event.feature.getGeometry().get());
        infowindow.open(map);
    }
}

【讨论】：