如何嵌入谷歌地图？

Question

我正在尝试将Google Map添加到我的网站，并且我尝试这样做：

 $.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);
 });

这是行不通的。 谁能告诉我为什么？

编辑

脚本已完美加载。 我知道这是因为alert(1)显示了，但是之后该控件没有到达alert(2) 。

Answer 1

document.getElementById(id)

id是什么，在哪里定义的？

另外，getScript还用于执行Ajax请求，这实际上并不是您应该如何执行Google Maps的方法。 只需以常规方式调用脚本，并具有一个init函数即可在准备好文档的情况下执行。 甚至最好还是使用Google Maps API为您提供的window.load事件监听器。

<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

您必须为此使用异步加载-https: //developers.google.com/maps/documentation/javascript/tutorial#asynch

在当前方法中，脚本可以执行以下操作-

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

因此，当您调用$.getScript时，它将$.getScript无效。 并且， google.maps.LatLng变为未定义。

我已经使用异步版本创建了一个版本。 您可以检查小提琴@ http://jsfiddle.net/rifat/G3yPw/

Answer 3

您应该查看一下容器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);