2010-10-13 2 views
19

Wenn ich versuche, Google zu laden Karten v3 mit Ajax ist das Ergebnis:laden Google Maps v3 dynamisch mit AJAX

<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script> 

im Quellcode, ich nehme an, dass mit Javascript document.write schreibt();

wie kann ich dies ohne iframe tun?

danke.

Antwort

13

ich es wie so gemacht habe ... dieses Beispiel verwendet jQuery und google map v3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function() {}); 

function MapApiLoaded() { 
    //.... put your map setup code here: new google.maps.Map(...) etc 
} 
+2

es funktioniert ok, aber ich bekomme Warnung in der js-Konsole: 'Warnung: Sie haben das Google Maps API mehrmals auf dieser Seite enthalten. Dies kann zu unerwarteten Fehlern führen. – phpJs

1

ich ein wenig geändert haben Bit Myster Beispiel, das sieht gut für mich aus

window.mapapiloaded = function() { 
     console.log('$.ajax done: use google.maps'); 
     createusinggmaps(); 
    }; 

    $.ajax({ 
     url: 'http://maps.google.com/-maps/api/js?v=3.2&sensor=true&region=it&async=2&callback=mapapiloaded', 
     dataType: 'script', 
     timeout: 30000, 
     success: function() { 
      console.log('$.ajax progress: waiting for mapapiloaded callback'); 
     }, 
     error: function() { 
      console.log('$.ajax fail: use osm instead of google.maps'); 
      createusingosm(); 
     } 
    }); 
29

Einen praktischen Weg gefunden.

Fiddle hier mit benutzerdefinierten Ereignisses (jQuery): http://jsfiddle.net/fZqqW/94/

window.gMapsCallback = function(){ 
    $(window).trigger('gMapsLoaded'); 
} 

$(document).ready((function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(47.3239, 5.0428), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    function loadGoogleMaps(){ 
     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    loadGoogleMaps(); 
})());​ 

EDIT Die loadGoogleMaps Funktion praktisch sein könnte mehr, wenn im globalen Bereich erklärt, vor allem, wenn sie in einer Ajax-Anwendung arbeiten. Und eine boolesche Prüfung verhindert, dass die API mehrmals wegen der Navigation geladen wird.

var gMapsLoaded = false; 
window.gMapsCallback = function(){ 
    gMapsLoaded = true; 
    $(window).trigger('gMapsLoaded'); 
} 
window.loadGoogleMaps = function(){ 
    if(gMapsLoaded) return window.gMapsCallback(); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
} 

$(document).ready(function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(47.3239, 5.0428), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    window.loadGoogleMaps(); 
}); 
+0

Arbeitete für mich praktisch out of Box. –

+0

https://developers.google.com/maps/documentation/javascript/tutorial#asynch –

+0

Das habe ich auch gefunden, danke fürs Teilen. Ich habe meine Antwort übrigens auf den neuesten Stand gebracht, fühlen Sie sich frei zu kommentieren. –

1
$LAB 
    .setOptions({AlwaysPreserveOrder:true}) 
    .script("http://maps.google.com/maps/api/js?v=3.exp&sensor=false&async=2") 
    .script("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js") 
    .script("script.js"); 

Innerhalb von script.js initialisieren Ihre Karte ohne Beispiel für Verfahren Last googles:

Namespace.map = (function(){ 

    var map, 
     markers = []; 

    return{ 
     init: function(){ 
       var myLatlng = new google.maps.LatLng(-25.363882,131.044922), 

        mapOptions = { 
         zoom: 4, 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 

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

       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: 'Hello World!' 
       }); 

       markers.push(marker); 
      } 
    }; 

}()); 

Innerhalb von script.js:

Namespace.map.init(); 

// Don't use: google.maps.event.addDomListener(window, 'load', initialize); 

Hinweis: Verlassen Sie sich nicht Bei dieser Methode ändert Google den Namen der zweiten js-Datei. Hier ist ein Beispiel aus ihrer Dokumentation:

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

8

Sie diesen Parameter verwenden, muss 'Rückruf = initialisieren' in dem Google Maps API-Skript mit AJAX zu laden:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 

Hier ist ein Google Maps Dokumentation:

Cómo cargar el API de forma asíncrona

+0

Wie versichern Sie sich diese Belastung später, ich möchte, dass mein Bildschirm-Rendering-Skript 1. ausgeführt wird. – SuperUberDuper

4

Einfache und Arbeitslösung (mit jQuery):

var gMapsLoaded = false; 

function loadGoogleMaps() { if(!gMapsLoaded) { $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=GoogleMapsLoaded", function(){}); } else { GoogleMapsLoaded(); } } 

function GoogleMapsLoaded() { 

    gMapsLoaded = true; 

    // your code here - init map ... 
} 

fügen Sie dies in Ihre Skripte ein und rufen Sie dann die Funktion loadGoogleMaps(); wenn Sie es brauchen!