關鍵：GClientGeocoder, getLocations
展示：http://klcintw.googlepages.com/google-map-GClientGeocoder.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps (台灣)</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
      type="text/javascript" for="http://klcintw.googlepages.com"></script>
   1:  
   2:     <script type="text/javascript">
   3:     //<![CDATA[
   4: var map = null;
   5: var geocoder = null;
   6: function load() {
   7:     // 檢查瀏覽器是否可使用 Google Map API
   8:     if ( GBrowserIsCompatible() ) {
   9:         map = new GMap2(document.getElementById("map"));
  10:         geocoder = new GClientGeocoder();
  11:         
  12:         // 設定地圖中心點
  13:         map.setCenter(new GLatLng(25.036772,121.520269), 14);
  14:     } // if
  15: }
  16:  
  17: // showLocation() is called when you click on the Search button
  18: // in the form.  It geocodes the address entered into the form
  19: // and adds a marker to the map at that location.
  20: function showLocation() {
  21:     var address = document.forms[0].q.value;
  22:     geocoder.getLocations(address, addAddressToMap);
  23: }
  24:     
  25: // addAddressToMap() is called when the geocoder returns an
  26: // answer.  It adds a marker to the map with an open info window
  27: // showing the nicely formatted version of the address and the country code.
  28: function addAddressToMap(response) {
  29:     map.clearOverlays();
  30:     if (!response || response.Status.code != 200) {
  31:         alert("查無資料！\n Sorry, we were unable to geocode that address");
  32:     } // if
  33:     else {
  34:         place = response.Placemark[0];
  35:         point = new GLatLng(place.Point.coordinates[1],
  36:                             place.Point.coordinates[0]);
  37:         marker = new GMarker(point);
  38:         map.addOverlay(marker);
  39:         marker.openInfoWindowHtml(place.address + '<br>' +
  40:           '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
  41:     } // else
  42: }
  43:     
  44: // findLocation() is used to enter the sample addresses into the form.
  45: function findLocation(address) {
  46:     document.forms[0].q.value = address;
  47:     showLocation();
  48: }     
  49:     //]]>
  50:   
</script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <h1>GClientGeocoder</h1>
    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <b>地址：</b>
        <input type="text" name="q" value="古亭國小" class="address_input" size="40" />
        <input type="submit" name="find" value="Search" />
      </p>
    </form>  
    <div id="map" style="width:500px; height:350px"></div>
    <ul>
    <li><a href="javascript:findLocation('台北市羅斯福路三段201號');">古亭國小(以地址尋找)</a></li>
    <li><a href="javascript:findLocation('古亭國小');">古亭國小(以名稱尋找)</a></li>
    </ul>
  </body>
</html>

snap026