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: home
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>