1

Tenho um código para mostrar o Google Maps com vários marcadores, no que eu clico para mostrar o mapa dá esse erro:

ReferenceError: google is not defined. Não faço ideia do que seja.

OBS: o código está pegando a latitude a a longitude no banco, apenas na hora de aparecer na view dá o erro e não aparece em as localizações e nem o mapa. O script na view chama o código em 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);
    });
}

Note que o mapa está sendo chamado, mas não aparece(está dentro do quadrado azul).

3
  • 3
    Esse código nõ tem JavaScript nenhum :-( ... podes colocar o JavaScrips e a maneira como estás a carregar a biblioteca do google na página?
    – Sergio
    10/06/2015 às 20:12
  • @Sergio eu tinha esquecido de colocar a parte em JavaScript, me desculpe pelo ocorrido. Meu problema mesmo é na hora de aparecer na view, o mapa não inicializa, as informações estão vindo do banco de dados.
    – Ketlin
    12/06/2015 às 11:36
  • Boa tarde Ketlin, do jeito que a pergunta está todas respostas serão imprecisas, pois você não forneceu um exemplo que possamos reproduzir, quando for fazer novas perguntas recomendo que leia: pt.stackoverflow.com/help/mcve - entenda isto como uma critica construtiva. 10/01/2016 às 16:49

1 Resposta 1

1

Você não pode usar a API do Google Maps Javascript até que seja carregado. Sua criação está executando o marcador antes do API seja carregada. Você precisa movê-lo para a função initialize, que não será executado até que a API está disponível. Tente colocar antes da chamada do seu script do API:

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

e depois no arquivo tower.js faça o método 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();

caso esse initialize não funcione tente esse:

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);
3
  • 1
    Obrigada por responder, mas coloquei esse código no meu site e ele continua com o mesmo erro duplicado e com outro: addLoadEvent is not defined.
    – Ketlin
    12/06/2015 às 14:34
  • Para quem estiver com este problema, carregue o script passando a chave da API desta forma: <script async defer src="maps.googleapis.com/maps/api/js?key=SUA_CHAVE_API_DO_GOOGLE"> O truque é o campo 'key = API'. A maneira como o script do Google Maps deve ser carregado foi alterada e não funciona mais sem uma chave de API. 19/05/2020 às 16:28
  • Está pergunta não deveria estar fechada. Sua resposta não é definitiva por toda a existência do Google e suas normas e técnicas. 19/05/2020 às 16:29

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .