1

私は Google マップを使用していますが、タイミングの問題に直面しています。具体的には、Google マップの API のスクリプトをいつロードするかについてです。

私は得ています：

Uncaught ReferenceError: google is not defined

ただし、コンソールで Google オブジェクトを見ると、問題なく表示されます。

API のスクリプトは、使用する前にまだ完全にロードされていませんか?

また、このメイン スクリプト (以下) を「defer」属性でロードしていますが、それは問題ではないと思います。

私は何が欠けていますか？

前もって感謝します。

var inrMap = {
    map : null,
    markers : [],

    addCoords : function(){
        var regex1 = /\s/;
        var regex2 = /\./;
        for(var i in inrMap.locations){
            var address = inrMap.locations[i].address;
            address = address.replace(regex1, '+');
            address = address.replace(regex2, '');
            $.ajax({
                data : 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=false',
                dataType : 'json',
                type : 'get',
                success : function(data, textStatus, xhr){
                    inrMap.locations[i].lat = data.geometry.location.lat;
                    inrMap.locations[i].lng = data.geometry.location.lng;
                },
                error : function(xhr, textStatus, errorThrown){
                    //console.error('problem with geocoding service...');
                }
            });     
        }
    },

    generateMap : function(){
        var map_options = { center : new google.maps.LatLng(-34.397, 150.644), zoom : 8, mapTypeId : google.maps.MapTypeId.ROADMAP };
        inrMap.map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
        //load markers
        for(var i in inrMap.locations){
            var position = new google.maps.LatLng(inrMap.locations[i].lat, inrMap.locations[i].lng);
            inrMap.markers[i] = new google.maps.marker(position, inrMap.locations[i].title);        
            inrMap.markers[i].setMap( { map : inrMap.map, draggable : false, animation : google.maps.Animation.DROP } );
        }
    },

    bindMarkers : function(){
        // $(inrMap.markers).each(function(){
        //  this.bind('click', function(){
        //      //create new info window
        //      var location_name = this.id; // ***** this needs to be fixed ******
        //      var iw = new google.maps.InfoWindow( { content : this.id.title, maxWidth : '300' } );
        //  })
        // });
    },

    bindForm : function(){

    } 
}

inrMap.locations = {
            jacksonville : {
                title : 'jacksonville',
                address : '4651 Salisbury Rd. Suite 170, Jacksonville FL 32256',
                phone : '(904) 398-0155',
                link : '/location/florida-regional-office',
                marker : null
            },
            miami : {
                title : 'Miami',
                address : '15050 NW 79 Court Suite 104, Miami Lakes FL 33016',
                phone : '(305) 403-0594',
                link : '/location/florida-regional-office',
                marker : null
            }

etc...




}

//load google maps js
var gmaps_script = document.createElement('script');
gmaps_script.type = 'text/javascript';
gmaps_script.src = 'http://maps.googleapis.com/maps/api/js?key=*****&sensor=false';  
$('body').append(gmaps_script);

$(function(){

for(var i = 0; i < 4000; i++){
    var foo = Math.sin(i);
}

//check if locations object is not in local storage (and thus does not have coordinates)
if(!localStorage.getItem('inr_locations')){
    //get lat & long, add to locations obj
    inrMap.addCoords();
    //save object
    //localStorage.setItem('inr_locations', inrMap.locations);
}
else{
    //pull locations object from local storage
    //inrMap.locations = localStorage.getItem('inrMap.locations');
}

//create element to place map in
var map_canvas = document.createElement('div');
$(map_canvas).attr('id', 'map_canvas').appendTo('#content');

//generate map
inrMap.generateMap();

//bind events to map markers
//inrMap.bindMarkers();

//bind events to form / links
//inrMap.bindForm();

});
4

1 に答える 1

0

API のスクリプトは、使用する前にまだ完全にロードされていませんか?

はい、それが問題です。

それ以外の：

var gmaps_script = document.createElement('script');
gmaps_script.type = 'text/javascript';
gmaps_script.src = 'http://maps.googleapis.com/maps/api/js?key=*****&sensor=false';  
$('body').append(gmaps_script);

jQuery.getScript()を使用して、次のようにしてみてください。

//Temporary creating global function,for handling loading of the Google Maps Library
window.__googlemapscallback = function(){
     delete window.__googlemapscallback;

     //do your map initialization here
};

$.getScript('http://maps.googleapis.com/maps/api/js?key=*****&sensor=false&&callback=__googlemapscallback');

ロードの主な問題Google Maps V3 APIは、スクリプトが部分的にロードされるhttp://maps.googleapis.com/maps/api/js?key=*****&sensor=falseことです。URL によって、ライブラリの最初のチャンクをロードし、次に他のチャンクをロードします。すべてのチャンクが完全にロードされた後、ライブラリはURL で提供されるコールバック関数を呼び出します。

于 2012-07-13T19:28:34.383 に答える