我正在尝试制作一个餐厅定位器应用程序,但无法显示标记

时间:2016-06-12 03:21:17

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

我正在尝试让餐馆的标记放在我的地图上并且它不起作用。任何帮助,将不胜感激。我需要添加查询方法吗?我没有尝试,因为我要在完成后让位置保持静止。这是我的相关代码,

temps2 <- temps[!temps$country %in% "mycountry",]

1 个答案:

答案 0 :(得分:2)

PlacesService需要API_KEY

 var map;
 var infowindow;

 function initMap() {
   var center = new google.maps.LatLng(37.422, -122.084058);

   map = new google.maps.Map(document.getElementById('map'), {
     center: center,
     zoom: 13
   });

   infowindow = new google.maps.InfoWindow();
   var service = new google.maps.places.PlacesService(map);
   service.nearbySearch({
     location: center,
     radius: 8047,
     type: ['restaurant']
   }, callback);
 }

 function callback(results, status) {
   if (status === google.maps.places.PlacesServiceStatus.OK) {
     for (var i = 0; i < results.length; i++) {
       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);
   });
 }
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Place searches</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <script>
  </script>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&libraries=places&callback=initMap" async defer></script>
</body>

</html>