如何让谷歌地图显示附近的餐馆？ [关闭]答案

【问题标题】：How do I get google maps to display nearby restaurants? [closed]如何让谷歌地图显示附近的餐馆？ [关闭]
【发布时间】：2019-10-02 17:58:41
【问题描述】：

我正在尝试创建一个使用 Google Maps API 搜索用户位置附近的餐馆的网站。我不希望它在启动时加载，我将添加一个按钮来启动搜索。这是我的代码。我得到了一张地图，但没有标记，也没有显示餐馆。我启用了 Places API 和一个带有 id="map: 的 div。为什么我没有看到餐厅？

var map;

function createMap(){
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.0519752, lng: -76.314270999999},
    zoom: 10 
  });



var request ={
  location: center,
  radius: 8047,
  types: ['cafe']
}

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

service.nearbySearch(request, 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.addDomListener(window, 'load', createMap);

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&callback=createMap&libraries=places" async defer></script>

【问题讨论】：

标签： javascript api google-maps search

【解决方案1】：

变量center 未在 PlacesService 请求中定义。这是我在代码中看到的唯一问题。

【讨论】：

【解决方案2】：

发布的代码出现 javascript 错误：ReferenceError: center is not defined

猜你希望它成为地图的中心 (map.getCenter())

如果我进行更改，您的代码将返回 20 个位置，类型为 cafe

proof of concept fiddle

代码 sn-p：

var map;

function createMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.0519752,
      lng: -76.314270999999
    },
    zoom: 10
  });

  var request = {
    location: map.getCenter(),
    radius: 8047,
    types: ['cafe']
  }

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

  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(results.length);
    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,
    title: place.name
  })
}

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=createMap" async defer></script>

【讨论】：