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

这不起作用。谁能告诉我为什么？

修改

脚本完美加载。我知道这是因为alert(1)显示但在此控件之后未达到alert(2)。

Answer 1

document.getElementById(id)

什么是 id ，在哪里定义？

此外，getScript用于执行Ajax请求，这不是您应该如何使用Google地图。只需以正常方式调用脚本，并具有在文档就绪时执行的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时，那将是无效的。并且，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);

如何嵌入谷歌地图？

3 个答案: