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