Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API: markerwithlabel.js - Uncaught ReferenceError: google is not defined

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.

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>

..

like image 285
maxxyoo Avatar asked Sep 21 '15 10:09

maxxyoo


People also ask

Why this page can't load Google Maps correctly?

Unless a valid API key is present, the map will be displayed in a lower resolution and will have a watermark on it. If the credit card linked to the account is invalid or the number of free map views is surpassed, the "This Page Can't Load Google Maps Correctly" error will show up.

Is the Google Maps JavaScript API free?

The Maps JavaScript API uses a pay-as-you-go pricing model. Maps JavaScript API requests generate calls to two different SKUs depending on the type of request: map loads or panoramas. JavaScript services are priced separately from JavaScript native SKUs.


1 Answers

markerwithlabel.js requires a already loaded maps-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.

solution: load the maps-API synchronously

<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>
like image 76
Dr.Molle Avatar answered Oct 07 '22 06:10

Dr.Molle