我如何获得谷歌地图以显示附近的餐馆？

Question

我正在尝试创建一个网站，该网站使用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>

Answer 1

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

Answer 2

我收到一个JavaScript错误，显示的代码为：ReferenceError: center is not defined

猜测您希望它成为地图的中心（map.getCenter()）

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

proof of concept fiddle

代码段：

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>