jquery: Wie kann ich die Google Maps-API über Ajax laden?

Bevor Sie antworten: Dies ist nicht so direkt, wie Sie es erwarten würden!

Ich habe eine Schaltfläche "Auf Karte anzeigen", die beim Klicken ein Dialogfeld / einen Leuchtkasten mit der Google Map in öffnet.Ich möchte die Maps-API nicht auf pageload laden, nur wenn eine Map angefordert wurde

Dies ist eine PHP-Datei, die mit der Schaltfläche "Auf Karte anzeigen" in das Dialogfeld eingefügt wird:

<div id="map_canvas"></div>

<script type="text/javascript">
    $(function() {  
            //google maps stuff             
            var latlng = new google.maps.LatLng(<?php echo $coords ?>);
            var options = {
              zoom: 14,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };          
            var map = new google.maps.Map(document.getElementById('map_canvas'), options);          
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(<?php echo $coords ?>),
              map: map
            });
    })
</script>

Ich habe versucht, die API zu laden, bevor ich mich in dem Dialogfeld wie folgt eingemischt habe:

$('img.map').click(function(){      
    var rel = $(this).attr('rel');
    $.getScript('http://maps.google.com/maps/api/js?sensor=false', function(){
        $.fn.colorbox({
            href:rel
        })
    });
})

dies scheint nicht zu funktionieren:

Ich habe es auch versucht:

adding<script src="http://maps.google.com/maps/api/js?sensor=false"></script> zur Ajax-Datei type = "text / javascript" running$.getScript('http://maps.google.com/maps/api/js?sensor=false'); auf doc.ready

das Proble der Browser scheint auf die Datei api.js umgeleitet zu werden - Sie sehen einen weißen Bildschirm

Antworten auf die Frage(4)

Ihre Antwort auf die Frage