谷歌的地方API標記不會顯示在地圖上

頁面背後的想法是，如果你點擊地圖上的半徑周圍的餐館將出現。

我使用谷歌Chrome和驗證碼：

<html> 
    <head> 
     <title></title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script> 
     <script> 
      var map; 
      var infoWindow; 

      var request; 
      var service; 
      var markers = []; 

      function initialize() { 
       var myLatLng = new google.maps.LatLng(52.3666187, 4.8949654); 
       map = new google.maps.Map(document.getElementById('map'), { 
        center: myLatLng, 
        zoom: 13 
       }); 
       request = { 
        location: myLatLng, 
        radius: 8047, 
        types: ['restaurants'] 
       }; 
       infoWindow = new google.maps.InfoWindow(); 

       service = new google.maps.places.PlacesService(map); 

       service.nearbySearch(request, callback); 

       google.maps.event.addListener(map, 'rightclick', function(event) { 
        map.setCenter(event.latLng) 
        clearResults(markers) 

        var request = { 
         location: event.latLng, 
         radius: 8047, 
         types: ['cafe'] 
        }; 
        service.nearbySearch(request, callback); 
       }) 

      } 
       function callback(results, status) { 
        if (status === google.maps.places.PlacesServiceStatus.OK) { 
         for (var i = 0; i < results.length; i++) { 
          markers.push(createMarker(results[i])); 
         } 
        } 
       } 

       function createMarker(place) { 
        var placeLoc = place.geometry.location; 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: place.geometry.location 
        }); 
        google.maps.event.AddListener(marker, 'click', function() { 
         infoWindow.setContent(place.name); 
         infoWindow.open(map, this); 
        }); 

        return marker; 
       } 

        function clearResults(markers) { 
         for (var m in markers){ 

        markers[m].setMap(null) 
       } 
       markers = [] 

      } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <style> 
      html,body, #map{ 
       height: 100%; 
       margin: 0px; 
       padding: 0px 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
    </body> 
</html>

凡說MY_API_KEY API密鑰放置。

來源

2016-07-07 Aerosteon

有沒有在控制檯中的任何消息？ –

可能相關：http://stackoverflow.com/questions/38209843/google-map-autocomplete-api-not-adding-address-options/38235239#38235239 –

Dr.Molle你是對的，非常感謝！ – Aerosteon

我得到一個javascript錯誤，發佈代碼：Uncaught TypeError: google.maps.event.AddListener is not a function。當我確定標記出現時。

proof of concept fiddle

代碼片段：

var map; 
 
var infoWindow; 
 

 
var request; 
 
var service; 
 
var markers = []; 
 

 
function initialize() { 
 
    var myLatLng = new google.maps.LatLng(52.3666187, 4.8949654); 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: myLatLng, 
 
    zoom: 13 
 
    }); 
 
    request = { 
 
    location: myLatLng, 
 
    radius: 8047, 
 
    types: ['restaurants'] 
 
    }; 
 
    infoWindow = new google.maps.InfoWindow(); 
 

 
    service = new google.maps.places.PlacesService(map); 
 

 
    service.nearbySearch(request, callback); 
 

 
    google.maps.event.addListener(map, 'rightclick', function(event) { 
 
    map.setCenter(event.latLng) 
 
    clearResults(markers) 
 

 
    var request = { 
 
     location: event.latLng, 
 
     radius: 8047, 
 
     types: ['cafe'] 
 
    }; 
 
    service.nearbySearch(request, callback); 
 
    }) 
 

 
} 
 

 
function callback(results, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
    for (var i = 0; i < results.length; i++) { 
 
     markers.push(createMarker(results[i])); 
 
    } 
 
    } 
 
} 
 

 
function createMarker(place) { 
 
    var placeLoc = place.geometry.location; 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: place.geometry.location 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(place.name); 
 
    infoWindow.open(map, this); 
 
    }); 
 

 
    return marker; 
 
} 
 

 
function clearResults(markers) { 
 
    for (var m in markers) { 
 

 
    markers[m].setMap(null) 
 
    } 
 
    markers = [] 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map"></div>

來源

2016-07-07 14:10:59 geocodezip

谷歌的地方API標記不會顯示在地圖上

回答

相關問題