Google Maps JavaScript API V3 根据地址加载地图

效果图如下：
Google Maps JavaScript API V3 根据地址加载地图

javascript代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>
      无标题文档
  </title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
          
  </script>
  <script type="text/javascript">
          var geocoder;
  var map;
  var query = "香港 湾仔 维多利亚公园";
  var display = "<b>单位：</b> 维多利亚公园";

  function initialize() {
      geocoder = new google.maps.Geocoder();
      var myOptions = {
          zoom: 17,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      codeAddress();
  }

  function codeAddress() {
      var address = query;
      geocoder.geocode({
          'address': address
      }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
              });
              var infowindow = new google.maps.InfoWindow({
                  content: "<b>地址：</b>" + address + "<br>" + display
              });
              infowindow.open(map, marker);
          } else {
              alert("未能解析该地址的原因: " + status);
          }
      });
  }
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:400px">
  </div>
</body>

作者：曾祥展

出处：学无止境-博客园（http://www.cnblogs.com/zengxiangzhan/）

posted on 2011-09-01 11:01 .net 流氓阅读(1017) 评论(1) 编辑收藏举报