JQuery: как я могу загрузить API Карт Google через AJAX?

Question

Прежде чем ответить: это не так просто, как вы ожидаете!

• У меня есть кнопка «показать на карте», которая при нажатии открывает Диалоговое окно / лайтбокс с Google карта в.
• Я не хочу загружать API карт на загрузка страницы, только когда карта была запрошенный

Это php-файл, который кнопка «показать на карте» помещает в диалоговое окно:

<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>

Я пытался загрузить API перед настройкой в ​​диалоговом окне, например:

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

это не похоже на работу: (

я также пробовал:

• добавление <script src="http://maps.google.com/maps/api/js?sensor=false"></script> в файл ajax
• type = "text / javascript" работает $.getScript('http://maps.google.com/maps/api/js?sensor=false'); на док. уже

проблема браузер, кажется, перенаправлен в файл api.js - вы видите белый экран

Answer 1

Этот ответ на часто задаваемые вопросы подробно описывает, как загружать API Карт асинхронно, и есть хороший пример , который сопровождает его.

В основном, рекомендуется поместить код выполнения в именованную функцию, а затем загрузить API-интерфейс Карт, ссылающийся на указанный обратный вызов и использующий параметр «async». Или вы можете использовать getQSON jQuery следующим образом:

$.getJSON('http://maps.google.com/maps/api/js?sensor=false&async=2&callback=?', function(){
    $.colorbox({
        href:rel
    })
});

Answer 2

спасибо, что указал мне правильное направление. Эндрю, моя проблема заключалась в том, что обратный вызов в запросе API является обязательным для загрузки API по требованию.

Вот мой окончательный код jquery:

//in doc.ready
$('img.map').click(function(){      
    var rel = $(this).attr('rel');      
    $('body').data('map_href', rel ).append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=show_map"></script>');
})


function show_map(){
    $.fn.colorbox({
        href:$('body').data('map_href')
    })
}