Как вставить карту google?

Question

Я пытаюсь добавить карту Google на мой сайт, и я попытался это:

$.getScript("https://maps.googleapis.com/maps/api/js?sensor=false", function() { 
    alert("1");   
    var map; 
    var myOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    alert("2"); 
    map = new google.maps.Map(document.getElementById("container"), myOptions); 
}); 

Это не работает. Может ли кто-нибудь сказать мне, почему?

EDIT

Script загружается отлично. Я знаю это потому, что alert(1) показывает, но после этого контроль не достигает alert(2).

Answer 1

document.getElementById(id) 

Что идентификатор, откуда это получить определенные?

Также getScript предназначен для выполнения Ajax-запросов, что на самом деле не так, как вы должны делать Карты Google. Просто вызовите сценарий обычным способом и выполните функцию init, которая выполняется на готовом документе. Или даже лучше использовать прослушиватель событий window.load, который API Google Maps предоставляет вам в любом случае.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false" /> 

<script type="text/javascript"> 
function init(id) 
    {   
      var map; 
      var myOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(-34.397, 150.644), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById(id), myOptions); 
    } 

google.maps.event.addDomListener(window, 'load', init('yourDivID')); 
</script> 

Answer 2

Вы должны взглянуть на свой контейнерный div.

Он должен иметь указанную ширину и высоту.

И я использовал, чтобы отделить аффектацию LatLng:

 var map; 
    var ll = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: ll, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("container"), myOptions); 

Answer 3

Вы должны использовать асинхронной загрузки для этого - https://developers.google.com/maps/documentation/javascript/tutorial#asynch

В текущем подходе скрипт сделать this-

function getScript(src) { 
    document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); 
} 

Итак, когда вы звоните $.getScript, это будет пусто. И, google.maps.LatLng становится неопределенным.

Я создал версию с асинхронной версией. Вы можете проверить скрипт @http://jsfiddle.net/rifat/G3yPw/