Google Maps API:markerwithlabel。js -未捕获的ReferenceError:没有定义谷歌

I have read the docs and examples, but I it seems I cannot solve the initialization error ("Uncaught ReferenceError: google is not defined" + Uncaught ReferenceError: homeLatLng is not defined) when trying to include markerwithlabel.js file and it's reminds me to the "you cannot load something before the map is done" prob.

我已经阅读了文档和示例，但我似乎无法解决初始化错误(“未捕获的ReferenceError:谷歌没有定义”+未捕获的ReferenceError: homeLatLng没有定义)，当试图包含markerwithlabel时。它提醒我“在映射完成之前不能加载某些内容”prob。

What can I do?

我能做什么?

What was tried:

尝试是什么:

<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<script type="text/javascript"> 
    var map;
    function initMap() {

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 14,
                center: {lat: 52.5200066, lng: 13.404954}
            });

            var marker1 = new MarkerWithLabel({
                   position: homeLatLng,
                   draggable: true,
                   raiseOnDrag: true,
                   map: map,
                   labelContent: "$425K",
                   labelAnchor: new google.maps.Point(22, 0),
                   labelClass: "labels", // the CSS class for the label
                   labelStyle: {opacity: 0.75}
            });
    }
</script>

. .

1 个解决方案

#1

markerwithlabel.js requires a already loaded maps-API.

markerwithlabel。js需要一个已经加载的map - api。

When you load the maps-API asynchronously(as you do in your code), there is no guarantee that the maps-API is loaded when markerwithlabel.js will be loaded.

当您异步加载maps-API时(就像您在代码中所做的那样)，没有保证在markerwithlabel时加载maps-API。js将加载。

solution: load the maps-API synchronously

解决方案:同步加载map - api

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=mykey"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<script type="text/javascript"> 
    var map;
    function initMap() {

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 14,
                center: {lat: 52.5200066, lng: 13.404954}
            });

            var marker1 = new MarkerWithLabel({
                   position: homeLatLng,
                   draggable: true,
                   raiseOnDrag: true,
                   map: map,
                   labelContent: "$425K",
                   labelAnchor: new google.maps.Point(22, 0),
                   labelClass: "labels", // the CSS class for the label
                   labelStyle: {opacity: 0.75}
            });
    }
google.maps.event.addDomListener(window, 'load', initMap);
</script>

#1