Pertanyaan Dinamis Memuat api Google Maps


Saya mencoba memuat api peta google secara dinamis. Saya menggunakan kode berikut:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>;
head.appendChild(script);

tetapi ketika mencoba membuat peta

map = new GMap2(document.getElementById("map"));

atau

map = new google.maps.Map2(document.getElementById("map"));

Saya mendapatkan kesalahan bahwa google (atau GMap2) tidak terdefinisi.


7
2017-09-09 09:53


asal


Jawaban:


Kamu bisa melakukan ini. Anda dapat menambahkan nama fungsi panggilan balik di url. Ini akan dipanggil ketika API dimuat. Fungsi callback itu harus dapat diakses dalam lingkup dokumen.

Saya melakukannya beberapa waktu lalu dengan memicu acara khusus di jendela dengan jQuery: http://jsfiddle.net/fZqqW/5/

digunakan "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"

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

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            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();
})());​

Tanpa Asinkron Memuat API

Anda mungkin ingin memuat kode JavaScript Maps API setelah halaman Anda   pemuatan selesai, atau sesuai permintaan. Untuk melakukannya, Anda bisa menyuntikkannya sendiri    tag dalam menanggapi acara window.onload atau panggilan fungsi,   tetapi Anda perlu juga menginstruksikan Maps JavaScript API   bootstrap untuk menunda eksekusi kode aplikasi Anda hingga Maps   Kode API JavaScript dimuat sepenuhnya. Anda dapat melakukannya menggunakan callback   parameter, yang mengambil argumen fungsi untuk dieksekusi   menyelesaikan pemuatan API.

Kode berikut menginstruksikan aplikasi untuk memuat Maps API   setelah halaman telah terisi penuh (menggunakan window.onload) dan tulis   Maps JavaScript API menjadi tag di dalam halaman. Selain itu,   kami menginstruksikan API untuk hanya menjalankan fungsi initialize () setelah   API telah dimuat penuh dengan melewati callback = menginisialisasi ke Maps

Lihat disini : https://developers.google.com/maps/documentation/javascript/tutorial


8
2017-10-29 09:06



Pastikan Anda tidak memberi contoh peta sebelum Javascript selesai memuat.

Juga, Jika Anda ingin menggunakan pemuat AJAX API, Anda harus melakukannya seperti ini:

<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script>
<script type="text/javascript">
    google.load("maps", "2.x");

    // Call this function when the page has been loaded
    function initialize() {
        var map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
    }
    google.setOnLoadCallback(initialize);
</script>

Jika tidak, gunakan saja sumber skrip Maps API reguler:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script>

5
2017-09-09 15:35



Saya telah melakukannya seperti ... contoh ini menggunakan jQuery dan 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
}

3
2018-04-04 21:02