针对特定地址异步加载Google地图

时间:2014-05-21 04:54:54

标签: javascript google-maps asynchronous

如果已经回答,请提前道歉。但我花了几个小时阅读stackoverflow上的所有建议,并且无法弄清楚如何让它们为我工作,所以我最终决定问。我是一个javascript假人:(

我喜欢以下内容,因为我不需要找到LatLng。只要我有一个地址,我就可以得到地图。另外作为奖励,我也可以拥有自己的指针。完美的工作!但它有时会减慢加载页面的速度,因为在加载页面的其余部分之前必须首先加载地图。我想知道somecan是否足以告诉我如何异步加载以下内容?

提前感谢您的问候,

麦克

<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<style>
 body, html {width:100%;height:100%}
 #map {margin:25px;width:50%;height:50%}
</style>

<body>

<!-- Google Maps Start -->
<div id="map">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
  var address = '6925 Hollywood Blvd., CA 90028';
  var map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 12
  });
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
     'address': address
  }, 

  function(results, status) {
     if(status == google.maps.GeocoderStatus.OK) {
        new google.maps.Marker({
           position: results[0].geometry.location,
           map: map,
           icon: 'img/maps_marker.png'
        });
        map.setCenter(results[0].geometry.location);
     }
  });
</script> 
</div>
<!-- Google Maps End --> 

</body>
</html>

1 个答案:

答案 0 :(得分:0)

以下是代码

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  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?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

欲了解更多信息,请访问

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