<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 JavaScript API 示例: 定制图标</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));

        map.setCenter(new GLatLng(39.917,116.397), 10);
        map.addControl(new GSmallMapControl());        // 为所有标记创建指定阴影、图标尺寸灯的基础图标
        var baseIcon = new GIcon();
        baseIcon.shadow = "http://www.google.cn/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 letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.cn/mapfiles/er.png";          // 设置 GMarkerOptions 对象
          erOptions = { icon:letteredIcon };
          var er = new GMarker(point, erOptions);          GEvent.addListener(er, "click", function() {
            er.openInfoWindowHtml(index);
          });
          return er;
        }        // 随机向地图添加 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();

var latlng = new GLatLng(39.95369092212391, 116.41159683465957);
map.addOverlay(createMarker(latlng, '<table width="260" height="300" border="0" cellspacing="0" cellpadding="0">  <tr>    <td><img src="http://www.baidu.com/img/logo-yy.gif" /></td>  </tr>  <tr>    <td><p>百度公司简介</p>    <p>链接地址:<a href="http://www.baidu.com" target="_blank">http://www.baidu.com</a></p></td>  </tr></table>'));

var latlng = new GLatLng(40.034118702382194, 116.31196081638336);
map.addOverlay(createMarker(latlng, '<table width="260" height="300" border="0" cellspacing="0" cellpadding="0">  <tr>    <td><img src="http://bolmedia.com.cn/img/01.jpg" /></td>  </tr>  <tr>    <td><p>上地科实大厦</p>    <p>链接地址:<a href="http://www.bolmedia.com.cn" target="_blank">http://www.bolmedia.com.cn</a></p></td>  </tr></table>'));

var latlng = new GLatLng(39.98215559299117, 116.31590634584427);
map.addOverlay(createMarker(latlng, '<table width="260" height="300" border="0" cellspacing="0" cellpadding="0">  <tr>    <td><img src="http://www.bjxhl.net/images/uploadfile/20090502234742718753.jpg" /></td>  </tr>  <tr>    <td><p>中关村邮局</p>    <p>链接地址:<a href="http://www.bjxhl.net" target="_blank">http://www.bjxhl.net</a></p></td>  </tr></table>'));

        //for (var i = 0; i < 10; i++) {
//          var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
//            southWest.lng() + lngSpan * Math.random());
//          map.addOverlay(createMarker(latlng, i));
//        }
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="22%">&nbsp;</td>
          <td width="78%">&nbsp;
            <div id="map_canvas" style="width: 700px; height: 500px">
     
    </div></td>
        </tr>
      </table>
    
  </body>
</html>