google.maps.places 未定义答案

【问题标题】：google.maps.places is undefinedgoogle.maps.places 未定义
【发布时间】：2014-01-26 16:08:55
【问题描述】：

我有一个网站，通过 Google 地图、街道和地点加载一个位置的 3 个单独“视图”。

请看我下面的代码：

我终于让地图和街景能够正常工作，但在这方面有点挣扎。

我有一个与地图显示相同但添加了地点的选项卡。

<script type="text/javascript" 
  src="http://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap"></script>

<script type="text/javascript">
var myLattitude = <?php echo $data["lattitude"]; ?>;
var myLongitude = <?php echo $data["longitude"]; ?>;
var poiMap;
var infowindow;

function initializePoi() {
            var poiCentre = new google.maps.LatLng(myLattitude, myLongitude);

            poiMap = new google.maps.Map(document.getElementById('poi-canvas'), {
                center: poiCentre,
                zoom: 15
            });

            var request = {
                location: poiCentre,
                radius: 500,
                types: ['store']
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(poiMap);
            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: poiMap,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(poiMap, this);
            });
        }

现在这会正确初始化，但控制台会抛出以下错误：类型错误：google.maps.places 未定义

我只是想知道为什么会出现这个错误，我喜欢干净无错误的代码。

这些地方确实正确地显示了一切。

【问题讨论】：

如果你得到了答案，请检查它是否正确。
你是怎么做到的？新来的论坛:)
在向上/向下箭头下方，在每个答案的左侧，它是一个复选标记。单击它，将答案标记为正确。这样，您可以节省其他成员的时间:)
;) 感谢您的行动...！ :)

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

【解决方案1】：

您应该在 Google API URL 中添加选项 libraries=places

在您的情况下，您应该替换以下内容：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap"></script>

有了这个：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap&libraries=places"></script>

看src=""的结尾

【讨论】：

不是真的，JsFiddle 没有显示任何东西 :( 我想是服务器关键问题
哈，似乎有效的方法是将地图脚本的链接连同您的建议一起放在正文中，非常感谢 Meriano :)
如果您的 JavaScript 在代码修改后无法按预期工作，请注意清除浏览器缓存。愿这能有所帮助。

【解决方案2】：

现在，您必须使用 https 而不是 http。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=....&sensor=false&callback=initializeMap&libraries=places"></script>

其他一切都与前面提到的答案相同。

【讨论】：

【解决方案3】：

由于最佳答案针对的是香草版本，因此适用于使用 google-maps-react 的用户：

将库：['places'] 添加到您的 GoogleMapReact 组件：

   <GoogleMapReact
        bootstrapURLKeys={{ key: apiKey, libraries: ['places'] }}
    ...
   />

【讨论】：