Google Maps V3 - getting error google is not defined

Question

Lets first start with the google maps code:

var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
    1: 'invesCastProd',
    2: 'forged',
    3: 'airframe',
    5: 'corp',
    6: 'structurals'
}

var comp = {
    1: 'structurals',
    2: 'airfoils',
    3: 'airfoils',
    4: 'wyman',
    5: 'energy',
    6: 'strucComp',
    7: 'mechHard',
    8: 'engineProd',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'specMetals'
}

    var myJSON = {};
    var myMarkers=[];

    $.getJSON("/pcc-common/static/pcc-locations.json", function(json1) {
        myJSON=json1;
        $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng
            });
            myMarkers[key]=marker;
            marker.setMap(map);

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function() {

                if (infoWindow) {infoWindow.close();}
                infoWindow = new google.maps.InfoWindow({
                    content: "<h5>" + data.display_name + "</h5>" +
                    "<div>" + data.street+ "</div>" +
                    "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
                    "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
                    "<a href=" + data.web_url + ">Website</a>"
                });
                infoWindow.open(map, marker);
                map.setZoom(15);
                map.panTo(this.getPosition());

                google.maps.event.addListener(infoWindow,'closeclick',function(){
                  resetMapOrigin();
                });

            });

            filterMarkers = function(category){

                var component = category.data("component_id");
                var segment = category.data("segment_id")

                setMapOnAll(null);
                resetMapOrigin();

                var filteredMarkers=[];

                $.each(myJSON, function(key, data) {


                    if( typeof(component)!="undefined" ){

                      if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){ 
                        filteredMarkers.push(key);
                      }

                    }else{
                      if( myJSON[key].segment_id == segment ){
                        filteredMarkers.push(key);
                      }
                    }
                });

                for(i=0;i<filteredMarkers.length;i++){
                    myMarkers[filteredMarkers[i]].setMap(map);
                }
            }

            function setMapOnAll(map) {
                for (var i = 0; i < myMarkers.length; i++) {
                    myMarkers[i].setMap(map);
                }
            }

            function resetMapOrigin(){
              map.setZoom(2);
              map.setCenter({lat:52.4357808,lng:4.991315699999973});
            }
        });

    });

Here is the initialization script in the html:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAMNhLC5984PO876GF8nesnOqbiKkblvuBo&callback=initialize" async defer></script>

So what is happening is sometimes you open the site and it loads all the pins just fine. You click refresh and it loads all the pins again just fine. Click refresh and it loads again. Click refresh AGAIN and it throws an error Uncaught ReferenceError: google is not defined(...). And you can refresh multiple times and it will still throw an error. Then all of a sudden on a refresh click it will load all the pins with NO error. So basically sometime it works and other times it gives me an error.

I can't figure out what is happening or why it is doing this.

The line that it is erroring out on is var latLng = new google.maps.LatLng(data.latitude, data.longitude); (obviously cause this is the first "google" call).

Can anyone tell me why it is doing this?

BTW this is on a development server so it is not live online. But again it works sometimes and sometimes it gives me an error.

Thanks for the help!

Answer 1

All of your code that uses the Google Maps SDK needs to be executed in your initialize function. In your example, it's possible for your JSON to load before Google Maps, which is why you're sometimes getting an error.

One solution could be to move the callback for $.getJSON to a seperate function, and then trigger the request after the map is initialized.

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    // Fetch locations from the server
    $.getJSON("/pcc-common/static/pcc-locations.json", onLocationsFetched)
}

function onLocationsFetched(json) {
    myJSON=json1;
    $.each(json1, function(key, data) {
        ...