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 wurdeDies 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.readydas Proble der Browser scheint auf die Datei api.js umgeleitet zu werden - Sie sehen einen weißen Bildschirm