webentwicklung-frage-antwort-db.com.de

Laden Sie Google Maps v3 dynamisch mit Ajax

Wenn ich versuche, Google Maps V3 mit Ajax zu laden, lautet das Ergebnis:

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

im Quellcode nehme ich an, dass mit document.write () geschrieben wird;

wie kann ich das ohne iframe machen? 

vielen Dank.

21
ZiTAL

Dies wird nicht unterstützt. Bitte laden Sie die API mit unterstützten Methoden:

http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API

23
Chris Broadfoot

Einen praktischen Weg gefunden.

Geige hier mit benutzerdefiniertem Ereignis (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 kann praktischer sein, wenn sie im globalen Bereich deklariert wird, insbesondere wenn Sie in einer Ajax-Anwendung arbeiten. Eine boolesche Überprüfung verhindert, dass das API aufgrund der Navigation mehrmals 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();
});
29
Armel Larcier

Ich habe es so gemacht ... 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
}
14
Myster

Sie müssen diesen Parameter 'callback = initialize' im google maps API-Skript verwenden, um mit ajax zu laden: 

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

Hier ist eine Google Maps-Dokumentation:

Cómo cargar di API de forma asíncrona

8
borchvm

Einfache und funktionierende Lö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 Skripts ein und rufen Sie function loadGoogleMaps () auf. wenn du es brauchst!

4
Jan Šafránek

Ich habe ein kleines Myster-Sample geändert, das sieht gut aus für mich

    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();
        }
    });
1
D_Guidi
$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 Sie Ihre Karte ohne die Google-Lademethode. Beispiel:

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 auf diese Methode, da Google den Namen der zweiten JS-Datei ändert. Hier ist ein Beispiel aus ihrer Dokumentation:

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

1
Michael Benin