Referenceerror: google is not defined

Question

I have a code to show Google Maps with multiple markers, what I click to show the map gives this error:

Referenceerror: google is not defined. I have no idea what it is.

OBS: the code is taking the latitude a longitude in the database, only when appearing in the view gives the error and does not appear in the locations nor the map. The script in the view calls the javascript code.

View:

    <div class="row-fluid" style="margin-top: 2%;" >
    <div class="span12">
        <div class="widget-box">
            <div class="widget-header">
                <div class="widget-toolbar">
                    <a href="#" data-action="settings"><i class="icon-cog"></i></a>
                    <a href="#" data-action="reload"><i class="icon-refresh"></i></a>
                    <a href="#" data-action="collapse"><i class="icon-chevron-up"></i></a>
                    <a href="#" data-action="close"><i class="icon-remove"></i></a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-body-inner">
                    <div class="widget-main">
                        <div style="width: 100%; height: 600px;" id="map"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?php echo $this->config->base_url(); ?>public/js/tower.js"></script>//

JS:

//-------------------------INICIO-API-GOOGLE-MAPS-----------------------------//
var customIcons = {
    1: {
        icon: 'img/marcador.png'
    },
    2: {
        icon: 'img/marcador.png'
    },
    3: {
        icon: 'img/marcador.png'
    }
};
function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {
}

//posição de onde o mapa inicia
var stockholm = new google.maps.LatLng(-26.723342, -53.523956);
var marker;
var map;
function load() {
    var mapOptions = {
        zoom: 11,
        minZoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: stockholm
    };
    var count = 0;
    var infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map'), mapOptions);


    downloadUrl("ConMaps/mapLaudos", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var id = markers[i].getAttribute("id");
            //var name = markers[i].getAttribute("name");
            //var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            //var html = "<b>" + name + "</b>";
            //var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point
            });
            bindInfoWindow(marker, map, infoWindow, html, id);
        }
    });
    //atualiza marcadores trazendo dados do db
    setInterval(function() {
        downloadUrl("ConMaps/mapLaudos", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var id = markers[i].getAttribute("id");
                //var name = markers[i].getAttribute("name");
                //var type = markers[i].getAttribute("type");
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
                //var html = "<b>" + name + "</b>";
                //var icon = customIcons[type] || {};
                var marker = new google.maps.Marker({
                    map: map,
                    position: point
                });
                bindInfoWindow(marker, map, infoWindow, html, id);
            }
        });

    }, 100000);
}
function bindInfoWindow(marker, map, infoWindow, html, id) {
    google.maps.event.addListener(marker, 'click', function() {
        get_dg_json(id);
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        window.scroll(0, 300);
    });
}

Answer 1

You cannot use the Google Maps Javascript API until it is loaded. Your creation is running the marker before the API is loaded. You need to move it to the initialize function, which will not run until the API is available. Try to place before your API script call:

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

and then in the Tower.js file make the method initialize:

var map;

function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();

if this initialize doesn’t work try this:

function initialize() {

  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(51.817116, 4.780616),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: false
  };

  var map = new google.maps.Map(document.getElementById('maps'),
  mapOptions);

  var customMarker = new google.maps.Marker({
    position: new google.maps.LatLng(51.817116, 4.780616),
    map: map
  });

};  // end of initialize


function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&' +
    'callback=initialize';
  document.body.appendChild(script);
}

addLoadEvent(loadScript);