Google 地图小例子

Google 地图 API

http://code.google.com/intl/zh-CN/apis/maps/index.html?utm_campaign=zh_CN&utm_medium=ha&utm_source=zh_CN-ha-apac-cn-sk-api&utm_term=%E5%9C%B0%E5%9B%BE%20api

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google 地图 JavaScript API 示例: 简单地址解析</title>
    <script src="http://ditu.google.cn/maps?file=api&v=2.x&key=ABQIAAAAShwct_QljMmnHowYb2tDGRQQ2WaASEL6P8TBAhbU3HKX9mbZfxQCv4P_AvU9nWS88Byl0TLUdJs-Kg&hl=zh-CN" type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.917, 116.397), 13);
        geocoder = new GClientGeocoder();
      }
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("不能解析: " + address);
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
      document.getElementById("map_canvas").style.display="block";
    }
    window.onload=initialize;
    window.onunload = GUnload;
    </script>
  </head>

  <body>
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="北京市海淀区" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style=" 400px; height: 300px; display:none"></div>
    </form>
  </body>
</html>