Google Map API Version3 教程(四)：给marker标记加上自定义内容

转自：http://blog.sina.com.cn/s/blog_4cdc44df0100u9g1.html

Google Map API Version3 中标记可以给marker加上任何自己的东西。

效果如下：





代码:

首先还是定义一个marker：

lat = 23.14746;
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: myLatLng,
title: "Hello World!"
});

marker.setMap(map);

然后给marker标记添加点击事件和自定义内容：

var contentString = '<div id="content">' +
'<div>' +
'</div>' +
'<h1>我的标签</h1>' +
'<div id="bodyContent">' +
'<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
'</div>' +
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

infowindow是google指定的现实内容的类，你用HTML代码初始化它就好了
mapStyle是自己定义的样式，在这里可以使用网页的css样式表

示例代码下载：http://download.csdn.net/source/3331139