Google Places API 标记不会显示在地图上答案

【问题标题】：google places API markers won't show on the mapGoogle Places API 标记不会显示在地图上
【发布时间】：2016-11-09 18:17:48
【问题描述】：

无论我尝试什么，标记都不会显示。

页面背后的想法是，如果你点击地图，你周围半径内的餐馆就会出现。

我正在使用谷歌浏览器和这段代码：

<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 密钥。

【问题讨论】：

控制台有消息吗？
可能相关：stackoverflow.com/questions/38209843/…
Molle 博士，您是对的，非常感谢！

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

发布的代码出现 javascript 错误：Uncaught TypeError: google.maps.event.AddListener is not a function。当我修复标记显示时。

proof of concept fiddle

代码 sn-p：

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>

【讨论】：