前两篇:
[javascript]google map api 与jquery结合使用(1)--控件,监听器
[javascript]google map api 与jquery结合使用(2) --标注,浮窗
创建图标
map.js
$(document).ready(function()


{

if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94,106.08),4);
//创建小图标
var icon = new GIcon();
//图标图片
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
//图标阴影图片
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
//图标大小
icon.iconSize = new GSize(12, 20);
//阴影大小
icon.shadowSize = new GSize(22, 20);
//图标锚点
icon.iconAnchor = new GPoint(6, 20);
//信息浮窗锚点
icon.infoWindowAnchor = new GPoint(5, 1);
//随机的添加10个标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++)
{
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}

$(window).unload(function ()
{
$('.').unbind();
GUnload();
});
}else

{
alert('你使用的浏览器不支持 Google Map!');
}
});
使用小图标的效果
使用更复杂图标样式
map.js
$(document).ready(function()


{

if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94,106.08),4);
//创建一个图标模板,指定阴影等
var baseIcon = new GIcon();
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);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
//创建用指定字母作为前景图的图标

function createMarker(point, index)
{
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
var marker = new GMarker(point, icon);

GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
});
return marker;
}
//随机添加10个标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++)
{
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}

$(window).unload(function ()
{
$('.').unbind();
GUnload();
});
}else

{
alert('你使用的浏览器不支持 Google Map!');
}
});
用指定字母作为前景图的图标效果
在地图上使用XML和异步请求(AJAX)
map.js
$(document).ready(function()


{

if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.94,106.08),4);
//ajax请求

GDownloadUrl("locations.xml", function(data, responseCode)
{//回调函数
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");//解析xml,有多种方法

for (var i = 0; i < markers.length; i++)
{
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
}
});

$(window).unload(function ()
{
$('.').unbind();
GUnload();
});
}else

{
alert('你使用的浏览器不支持 Google Map!');
}
});
locations.xml
<markers>
<marker lat="39.98629852076348" lng="116.3574438359872"/>
<marker lat="29.94176113301537" lng="112.6857368551186"/>
</markers>
ajax的效果图
对google map api的使用暂告一段落。
Let life be beautiful like summer flowers and death like autumn leaves.