ReferenceError: google is not defined [closed]

Question

ReferenceError: google is not defined [closed]

Navigation

#1 by (0 votes)

1

I have a code to show Google Maps with several bullets, the one I click to show the map gives this error:

ReferenceError: Google is not defined. I have no idea what that is.

NOTE: The code is taking the latitude to the longitude in the bank, only when it appears in the view gives the error and does not appear in the locations nor the map. The script in the view calls the code in javascript.

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);
    });
}

javascript google-maps

asked by anonymous 10.06.2015 / 21:57

1 answer

PHPExcel - Library automatically converts date notation when importing Excel worksheet, from dd / mm / yyyy changes to mm / dd / yyyy Wordpress does not list posts correctly

score 0 · Answer 1

You can not use the Javascript Maps API until it loads. Your build is running the marker before the API loads. You need to move it to the initialize function, which will not run until the API is available. Try placing before the call of your API script:

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

andtheninthefiletower.jsdotheinitializemethod:

varmap;functioninitialize(){varlatlng=newgoogle.maps.LatLng(-18.8800397,-47.05878999999999);varoptions={zoom:5,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};map=newgoogle.maps.Map(document.getElementById("mapa"), options);
}

initialize();

If this initialize does not 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);