谷歌地圖：當您點擊標記時如何顯示信息窗口

我是新手，不知道Google Maps API是什麼。我從JSON文件加載位置並在地圖上創建標記。我希望能夠點擊標記並顯示infowindow。現在，當我點擊標記時，什麼都不顯示。谷歌地圖：當您點擊標記時如何顯示信息窗口

<!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>

來源

2016-11-20 Bradley Newman

我可以看到您加載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); 
    } 
}

來源

2016-11-20 11:57:01 xomena

一個朋友幫我解決這個問題，此代碼的工作：

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">

來源

2016-11-21 03:55:26

谷歌地圖：當您點擊標記時如何顯示信息窗口

回答

相關問題