如何把在线地图Google Maps API整合到网站中去？

在过去的一年中，在线地图的发展是相当巨大，我们可以看到在线地图的极有价值的信息和其能力。这其中，最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。

Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图，你可以从这里取得Google API key 。一个地图 API key只对一个“目录”或域有效。key绑定了你的域名，你要在网站上放地图，需要有对应的key，否则拒绝读取地图数据，在本地测试可以不用key。当然，你可以申请多个API key。

一、创建一个简单的地图

在你的站点上引入Google Maps 是一件很简单的事情，你只需要加入：

• 引入Google的JavaScript 文件
• 设置JavaScript 一些参数
• 一个你需要显示地图的HTML layer

Google的Javascript文件引入:

<script 
charset="UTF-8"
src=http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY 
type="text/javascript"> 
</script> 

注意： 我们可以改变语言，比如说，把“hl=en” 改成中文“hl=zh-CN” 。我们还得要把“API_KEY” 改成我们向Google申请来的那个。

说明: 使用 UTF-8 编码会更好些。

设置地图参数:

这是你可定制有个性化的Google Maps的地方。我们可以增加一些参数来改变地图的样式。例如，我们可以设置地图的载入和显示的坐标。下面是相关的代码：

]function initialize() { 
     if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map_canvas")); 
        map.setCenter(new GLatLng(37.97918, 23.71665), 13); 
        map.setUIToDefault(); 
     } 
} 

请注意上面高亮的那一条语句，第一个是纬度坐标和第二个是经度坐标，“13” 表示地图缩放的程度，这个值可以取1 到17。

要知道所在地点的纬度和经度，你可以使用这个工具，这个工具很容易使用，只需要把地图移到你想要的区域，然后，把鼠标放在中心就可以了。

 二、地图标记

你可以在地图上放上一个标记来标出一个特定的位置，下面是一个示例代码。

var point = new GLatLng(37.97110, 23.72601); 
map.addOverlay(new GMarker(point)); 

于是，我们整个代码看起来是下面这个样子：

function initialize() { 
     if (GBrowserIsCompatible()) { 
        var map = new GMap2(document.getElementById("map_canvas")); 
        map.setCenter(new GLatLng(37.97918, 23.71665), 13); 
        var point = new GLatLng(37.97110, 23.72601); 
        map.addOverlay(new GMarker(point)); 
        map.setUIToDefault(); 
    } 
 } 

上面的示例把我们的地图的中心放在了希腊雅典，标记了雅典卫城。

气球提示

气球提示一个很不错的界面，他可以用于放置一些小提示或或是一些信息。例如，下面的代码将放置一个在雅典卫城山上放一个气球提示来显示一些信息：

function initialize() { 
     if (GBrowserIsCompatible()) { 
         var map = new GMap2(document.getElementById("map_canvas")); 
         map.setCenter(new GLatLng(37.97110, 23.72601), 13); 
         var html = "Parthenon 帕台农神庙, 地址: Acropolis Hill"; 
         map.openInfoWindow(map.getCenter(), 
         document.createTextNode(html)); 
         map.setUIToDefault(); 
     } 
} 

三、活动标记

我们可以合并一些标记和气球提示来创建一个活动标记，这样一来，我们可以达到这样的效果——当用户点击某个标记的时候才会显示提示。代码如下所示：

function initialize() { 
     if (GBrowserIsCompatible()) { 
         var map = new GMap2(document.getElementById("map_canvas")); 
         map.setCenter(new GLatLng(37.97918, 23.71665), 13); 
         var baseIcon = new GIcon(G_DEFAULT_ICON); 
         baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
         baseIcon.iconSize = new GSize(20, 34); 
         baseIcon.shadowSize = new GSize(37, 34); 
         baseIcon.iconAnchor = new GPoint(9, 34); 
         baseIcon.infoWindowAnchor = new GPoint(9, 2); 

         function createMarker(point, index) { 
             var redIcon = new GIcon(baseIcon); 
             redIcon.image = "http://www.google.com/mapfiles/marker.png"; 
             markerOptions = { icon:redIcon }; 
             var marker = new GMarker(point, markerOptions); 
             GEvent.addListener(marker, "click", function() { 
             marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 
            }); 
             return marker; 
         } 
         var latlng = new GLatLng(37.97110, 23.72601); 
         map.addOverlay(createMarker(latlng)); 
     } 
 } 

让我来梳理一下上面的代码。下面的部分是在标记下增加一个阴影：

var baseIcon = new GIcon(G_DEFAULT_ICON); 
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
baseIcon.iconSize = new GSize(20, 34); 
baseIcon.shadowSize = new GSize(37, 34); 
baseIcon.iconAnchor = new GPoint(9, 34); 
baseIcon.infoWindowAnchor = new GPoint(9, 2);

标记的Action是在这里设置的：

function createMarker(point, index) { 
     var redIcon = new GIcon(baseIcon); 
     redIcon.image = "http://www.google.com/mapfiles/marker.png"; 
     markerOptions = { icon:redIcon }; 
     var marker = new GMarker(point, markerOptions); 
     GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 
     }); 
    return marker; 
} 

这里是我们的标记的坐标：

var latlng = new GLatLng(37.97110, 23.72601); 
map.addOverlay(createMarker(latlng)); 

载入地图

我们可以通过两种方法载入地图。我们可以让地图在整网页载入时载入（通过使用body的load事件），也可以把载入过程赋给其它事件。下面的两个方法是我们需要注意的：

• initialize() 载入地图
• GUnload() 卸载地图以释放内存

我们当然还需要使用HTML的DIV标签来指定一个ID，这样才能被JavaScript使用，在我们的示例中，我们使用“map_canvas”。我们也能使用CSS来渲染这个DIV层。

定制地图

你可以使用自定义的标记和阴影。有两个工具可以帮助你创建这些图标—— 地图标记 和 阴影。你也可以使用HTML和CSS来定义气球提示。