[SOLVED] Google maps api: callback=initialize fails?

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