Google maps api: callback=initialize fails?

StackOverflow https://stackoverflow.com//questions/24024930

Question

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

Was it helpful?

Solution

When you must load the maps-API asynchronously you also must load the infobox.js asynchrously.

  1. load the maps-API asynchronously and define a callback where you load the infobox.js
  2. when the infobox.js has been loaded run the function that creates the map

there may be other solutions, but they would require to modify the infobox.js

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top