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>
posted @ 2011-09-23 10:36  易独  阅读(260)  评论(0编辑  收藏  举报
乐巴儿 一个有声音的公众号
长按,识别二维码,加关注