web-dev-qa-db-fra.com

Charger dynamiquement Google Maps v3 avec ajax

Lorsque j'essaie de charger Google Maps v3 avec ajax, le résultat est le suivant:

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

dans le code source, je suppose que cela écrit avec javascript document.write ();

comment je peux le faire sans iframe? 

merci.

javascriptajaxgoogle-mapsgoogle-maps-api-3
21
ZiTAL

Ceci n'est pas supporté. Veuillez charger l'API en utilisant les méthodes supportées:

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

23
Chris Broadfoot

Trouvé un moyen pratique.

Violonnez ici avec un événement personnalisé (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 La fonction loadGoogleMaps pourrait être plus pratique si elle est déclarée dans la portée globale, en particulier lorsque vous travaillez dans une application ajax. Et une vérification booléenne empêchera le chargement de l'API plusieurs fois à cause de la navigation.

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

Je l'ai fait comme si ... cet exemple utilise jQuery et 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

Vous devez utiliser ce paramètre 'callback = initialize' dans le script d'API Google Maps pour charger avec ajax: 

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

Voici une documentation google maps:

Carrière et API de manière générale

8
borchvm

Solution simple et efficace (avec 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 ...
}

collez-le dans vos scripts puis appelez la fonction loadGoogleMaps (); quand vous en avez besoin!

4
Jan Šafránek

J'ai un peu changé l'échantillon de Myster, ça a l'air de bien marcher pour moi

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

Dans script.js, initialisez votre carte sans utiliser la méthode de chargement googles, par exemple:

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

}());

À l'intérieur de script.js:

Namespace.map.init();

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

Remarque: ne vous fiez pas à cette méthode car Google modifie le nom du deuxième fichier js. Voici un exemple tiré de leur documentation:

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

1
Michael Benin