0

I'm trying to implement a Google Maps v3 Asynchronous map into my site, and have it nearly identical to the how to. No map loads on the page though! Does anyone see anything wrong here?

<script type="text/javascript">

google.maps.visualRefresh = true;

function initialize() {
  var mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(42.7870,-86.1023),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

</script>

and

<div id="map-canvas"></div>

The CSS for this page is very simple:

html, body, #map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

Any thoughts?

4

2 回答 2

1

有2个问题。

  1. 移动这条线

    google.maps.visualRefresh = true;

    开始initialize。当您异步加载 API 时，google在执行此行时仍然未定义（您的调试器应该告诉您这一点），此错误将阻止所有后续指令执行。

  2. script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false' + 'callback=initialize';

    在后面加一个 & 号false

于 2013-08-20T14:53:12.870 回答
0

Sometines 最好直接访问源代码而不使用 google :)

你可以看看他们正在使用和学习的源代码。之后你可以谷歌。

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

在这个例子中，他们对谷歌地图库使用同步加载。

您可能想加载 asyncronous 然后使用这种方式：

· 首先添加 div 和你的初始化函数：

<div id="map" style="width: 100%; height: 480px;"></div>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            zoom: 18,
            center: new google.maps.LatLng(42.7870,-86.1023),
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

注意：您不需要使用 google.maps.visualRefresh = true; 正如谷歌在这里所说的那样： https ://developers.google.com/maps/documentation/javascript/basics

· 第二个地方是异步加载的脚本和头部或者最后一行之前的en 标记。这将使页面的加载速度有点快。

<script type="text/javascript"> 
    (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
</script>
于 2014-01-17T19:24:50.960 回答