[AJAX] google map 的應用～

Feed on: Posts; Comments

Oct 4th, 2008 by appleboy 參觀者：1,734Views 機器人：507Views

嗯嗯，我自己的 blog 有在寫美食，就會有美食地點，當然我覺得把 google map api 整合進來，是不錯的方法，其實 google map 也提供了只要輸入地址，就可以直接幫妳對應經度跟緯度的值，這樣就可以利用 ajax 的技術把資料庫裡面的地址都加上 google map 了，至少之前高雄線上是這樣加上所有店家資訊的地址 google map，其實要使用 google map 相當容易，其實妳只要按照下面步驟就可以了：

1. 先申請 google map 的 api key
填入網址之後，他會給妳一組 api key 就是 js 要寫入的部份，底下是官方提供的範例：

<!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 JavaScript API Example</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHse-GGY_00-U5SRQBPV9dBReBax2grriB_-tQq0LSZirt5GhjRQkmE2EaXUL4QmZlvKQjlsd_eBWlg"

      type="text/javascript"></script>

    <script type="text/javascript">

    //<![CDATA[

    function load() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById("map"));

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      }

    }

    //]]>

    </script>

  </head>

  <body onload="load()" onunload="GUnload()">

    <div id="map" style="width: 500px; height: 300px"></div>

  </body>

</html>

裡面其中的這一段：

#

# google map api key

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHse-GGY_00-U5SRQBPV9dBReBax2grriB_-tQq0LSZirt5GhjRQkmE2EaXUL4QmZlvKQjlsd_eBWlg"

      type="text/javascript"></script>

其實可以利用 Google's AJAX APIs 改寫成：

<script src="http://www.google.com/jsapi?key=ABQIAAAAHse-GGY_00-U5SRQBPV9dBReBax2grriB_-tQq0LSZirt5GhjRQkmE2EaXUL4QmZlvKQjlsd_eBWlg" type="text/javascript"></script>

<script type="text/javascript">

  google.load("maps", "2", {"locale" : "UTF-8"});

</script>

如果你要用 google translate language api 可以用：

//google language api

google.load("language", "1");

接下來是使用官方提供的地址轉換經度緯度功能，然後在小小的修改就可以了：

<script type="text/javascript">

  function showAddress(address, message, map_id_name) {

    if (GBrowserIsCompatible()) {

      //alert(address);

      map = new GMap2(document.getElementById(map_id_name));

      map.addControl(new GSmallMapControl());

        geocoder = new GClientGeocoder();

        geocoder.getLatLng(address, function(point) {

        if (!point) {

          map.setCenter(new GLatLng(23.634416,120.970529), 7);

          var marker = new GMarker(new GLatLng(23.634416,120.970529));

          map.addOverlay(marker);

          marker.openInfoWindowHtml("找不到該地址，無法顯示相關地圖");

        } else {

          map.setCenter(point, 13);

          var marker = new GMarker(point);

          map.addOverlay(marker);

          marker.openInfoWindowHtml(message);

        }

          });

    }

  }

</script>

接下來只要在blog文章裡面使用：

<div id="map_address2" style="width: 500px; height: 300px"></div>

<script type='text/javascript'>

window.load(showAddress("高雄市苓雅區三多四路31號", "   餐廳名稱：大遠百隔壁 幸福餐桌<br />地    址：高雄市苓雅區三多四路31號<br />電    話：(07)3382698<br />營業時間：AM 11:00 ~ PM 21:00<br />價位範圍(每人)：200~300<br />鄰近捷運站：三多捷運站", "map_address2")); 

</script>