谷歌地图.places未定义。

Question

我有一个网站，通过Google Maps、街景和地点加载了一处位置的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);
            });
        }

现在这段代码可以正常初始化，但是控制台会抛出以下错误：TypeError: google.maps.places未定义

我只是想知道为什么会出现这个错误，因为我希望我的代码没有错误。

实际上位置还是正确显示的。

- Paul

---

如果您得到了答案，请将其标记为正确。 - KodeFor.Me

你怎么做到的？我是论坛新手 :) - Paul

在每个答案的上下箭头下面，左边有一个勾选标记。点击它，将答案标记为正确。这样，您可以节省其他成员的时间 :) - KodeFor.Me

感谢您的行动...！:) - KodeFor.Me

Answer 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=""的结尾

- KodeFor.Me

---

并不是很好，JsFiddle没有显示任何内容 :( 我想是服务器密钥的问题 - Paul

哈，似乎起作用的是将地图脚本的链接放在正文中，并结合您的建议，非常感谢Meriano :) - Paul

请注意，如果您在修改代码后发现JavaScript无法按预期工作，请清除浏览器缓存。希望这可以帮到您。 - KodeFor.Me

Answer 2

如果您正在使用 React。

import { Wrapper as MapsWrapper } from "@googlemaps/react-wrapper";

// Note libraries prop.
<MapsWrapper apiKey={'YOUR_API_KEY'} libraries={['places']}>
  <ChildComponent />
</MapsWrapper>

- RegarBoy

Answer 3

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

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

其他的都和之前提到的答案一样。

- Amir Md Amiruzzaman

Answer 4

由于顶部答案涉及纯净版本，因此适用于使用google-maps-react的用户：

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

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

- Embedded_Mugs