javascript - Google Maps API: markerwithlabel.js - Uncaught ReferenceError: google is not defined -
i have read docs , examples, seems cannot solve initialization error ("uncaught referenceerror: google not defined" + uncaught referenceerror: homelatlng not defined) when trying include markerwithlabel.js file , it's reminds me "you cannot load before map done" prob.
what can do?
what 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", // css class label labelstyle: {opacity: 0.75} }); } </script> ..
markerwithlabel.js requires loaded maps-api.
when load maps-api asynchronously(as in code), there no guarantee maps-api loaded when markerwithlabel.js loaded.
solution: load 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", // css class label labelstyle: {opacity: 0.75} }); } google.maps.event.adddomlistener(window, 'load', initmap); </script> 
Comments
Post a Comment