Menu
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>
..
285
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
