So, the fundamental problem that I am trying to solve is that when placing my google map inside the CMS that I'm using, I get an "uncaught reference error: google is not defined".
According to this answer:
Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX
this is because I need to load the maps api asyncronously. However, this solution seems to fail for me.
As I understand it, I have to append "&callback=initialize" to my api-url, such that it becomes:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da&callback=initialize">
</script>
as well as remove the line
google.maps.event.addDomListener(window, 'load', initialize);
. However, when I do this, my infoboxes break, in that I get errors such as
Uncaught TypeError: undefined is not a function VM344:1
Uncaught TypeError: Object #<InfoBox> has no method 'open' test1.html:112
Uncaught TypeError: Object #<InfoBox> has no method 'close'
I'm afraid I can't figure out how to create a jsFiddle for this, but at http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/06/test1.html is the working version, which I also include here:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 500px;width:800px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=${KEY}&sensor=false&language=da">
</script>
<script src="http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/05/infobox_packed.js" type="text/javascript"></script>
<script type="text/javascript">
getTextWidth = function(text, font) {
// re-use canvas object for better performance
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
};
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(56.3,11.266724),
zoom: 7,
mapTypeControl: false,
streetViewControl:false
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var yellowCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 0.5,
zIndex:-10
};
var yellowBlackCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 1.5
};
function createMarker(Lat,Lng, name,url) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat,Lng),
map: map,
icon:yellowCircle,
url:url
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(yellowBlackCircle);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(yellowCircle);
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = url;
});
var myOptions = {
content: name
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,fontSize: "12pt"
,fontType: "arial"
,backgroundColor: "#faeadd"
,fontWeight: "bold"
,zIndex:1
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-getTextWidth(name, "bold 12pt arial")/2,-30)
,position: new google.maps.LatLng(49.47216, -123.76307)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
,zIndex:1
};
var infobox = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'mouseover', function() {
infobox.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infobox.close();
});
return marker;
}
var m1=createMarker(55.373806,10.358844,"Gejst","http://bydk.nu/gejst");
var m2=createMarker(55.678385,12.580772,"Lomonto","http://bydk.nu/lomonto");
var m3=createMarker(55.708497,12.522273,"Place de Bleu","http://bydk.nu/place-de-bleu");
var m4=createMarker(55.156415,8.768423,"Vibegaard","http://bydk.nu/vibegaard");
var m5=createMarker(55.135455,15.143124,"Mermaid Universe","http://bydk.nu/mermaid-universe");
var m6=createMarker(57.438630,10.549226,"Ny Nordisk","http://bydk.nu/ny-nordisk");
var m7=createMarker(55.697463,12.573891,"Mirins","http://bydk.nu/mirins");
var m8=createMarker(56.128009,10.163206,"AFTC","http://bydk.nu/aftc");
var m9=createMarker(55.642488,12.608132,"Droobski","http://bydk.nu/Droobski");
var m10=createMarker(56.191441,10.192129,"Louise Ravnløkke","http://bydk.nu/louise-ravnloekke");
var m11=createMarker(56.144979,10.187208,"Snak","http://bydk.nu/snak");
var styles = [
{
"featureType": "road.highway",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#b1b1b3" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
{ "visibility": "on" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
}
];
map.setOptions({styles: styles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"/>
console.log(getTextWidth("hello there!", "bold 12pt arial"));
</body>
</html>
I'm sorry that it is not more of an MWE, I can try to trim everything if necessary. If you think the original error is not caused by asynchronous loading, then of course I'm very interested in hearing about that :)