google map api 实例/google 地图 map 版权信息 / 自定义版权信息[作者：神龙之首]

<!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=gbk"/>
<title>地图效果</title>

<!--
注意：
编码格式要统一。比如javascript要用gbk的,html页面要用gbk的
网页的META信息里也最好有一个指明是GBK的标签：
<meta content="text/html; charset=gbk" http-equiv="Content-Type" />

4.最后也是最重要的。要指明oe=gbk
不是动态加载的时候需要在scr的链接上加上"&oe=gbk";
如果里动态加载的话，参照下面的形式加载：
google.load("maps", "2", {
    "language" : "zh-CN",
    callback: initMap,
    other_params: "oe=gbk"
});

-->
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAoGSnSKpvFJ_vd37z-3W2YBTvnP71Q9TKzzkAeGbDhgqBh291hxQ1Fz6KO9ilwgDlDwJLzZIilsTQWQ&hl=zh-CN&oe=gbk" 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), 13);

        //控制器类型,（控件位置,控件大小）-可选参数
        map.addControl(new GLargeMapControl(),new GControlPosition(G_ANCHOR_TOP_LEFT , new GSize(10,10)));
        //加入卫星和混合地图标签
   map.addControl(new GHierarchicalMapTypeControl());
        //开启缩略图
        map.addControl(new GOverviewMapControl());

        //开启鼠标滑轮
        map.enableScrollWheelZoom();
        //开启地图搜索控件
        map.enableGoogleBar();

        // 添加底面叠加层,定坐标
        var boundaries = new GLatLngBounds(new GLatLng(39.917, 116.397), new GLatLng(39.935, 116.42));
        // 添加底面叠加层,添加图片,可作广告之类
        var oldmap = new GGroundOverlay("http://hiphotos.baidu.com/slzs_zyt/pic/item/4b822ef479856970dcc4746c.jpg", boundaries);

        map.addOverlay(oldmap);

        //在地图的特定坐标位置创建HTML文本
        map.openInfoWindowHtml(new GLatLng(39.922, 116.414),"<font color='blue' size='2'>大家好,我是 slzs……－－|||<br>这个添加层可以在很多地方利用</font>");
        /*map.getCenter();可以得到地图中心位置坐标*/

// 创建自定义图标
var tinyIcon = new GIcon();
// 图片
tinyIcon.image = "http://hiphotos.baidu.com/slzs_zyt/pic/item/64638f51d0a30b8e8d54307c.jpg";
// 阴影
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
// 图片宽高
tinyIcon.iconSize = new GSize(70, 90);
// 阴影宽高
tinyIcon.shadowSize = new GSize(70, 90);
// 此图标在地图上的锚定点相对于图标图像左上角的像素坐标
tinyIcon.iconAnchor = new GPoint(6, 20);
// 信息窗口在此图标上的锚定点相对于图标图像左上角的像素坐标
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
// 创建标记
var marker0 = new GMarker(new GLatLng(39.900,116.379),tinyIcon)
// 向地图上添加
map.addOverlay(marker0);
// 监听click事件
GEvent.addListener(marker0, "click", function() {
map.openInfoWindowHtml(new GLatLng(39.900,116.379),"<font color='red' size='2'>您进行了点击操作，弹出链接地址</font>");
window.open('http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html');
});
        //延时9秒显示
        window.setTimeout(function(){
        map.openInfoWindowHtml(new GLatLng(39.900,116.385),"<font color='red' size='2'>这是一个可以点击弹出链接的标记</font>");
        },9000);

        //在特定位置加标记
        map.addOverlay(new GMarker(new GLatLng(39.922,116.377)));
        //延时3.5秒显示
        window.setTimeout(function(){
        map.openInfoWindowHtml(new GLatLng(39.922,116.377),"<font color='red' size='2'>这是一个固定位置的标记</font>");
        },3500);

        //添加一个可拖动的标记
        var marker = new GMarker(new GLatLng(39.905,116.377), {draggable: true});

        //监听这个标记的提起动作
        GEvent.addListener(marker, "dragstart", function() {
          map.closeInfoWindow();
        });
   //监听这个标记的放下动作
        GEvent.addListener(marker, "dragend", function() {
          marker.openInfoWindowHtml("<font color='red' size='2'>已经放下，标记反弹</font>");
       //延时1秒关闭提示信息
       window.setTimeout(function(){marker.closeInfoWindow()},1000);
        });
   //添加这个标记
        map.addOverlay(marker);
        //延时6秒显示提示信息
        window.setTimeout(function(){
        marker.openInfoWindowHtml("<font color='red' size='2'>这是一个可拖动位置的标记,按住鼠标左键拖动</font>");
        },6000);

    // 记录标记
    var gmarker= null;
    //点击获取地理坐标
    clickListener=GEvent.addListener(map, "click", function(marker,point){

if(point){

alert("x"+point.x+",y"+point.y+",倍率"+map.getZoom());

      }

    if(gmarker!=null){
       //移除之前的标记
       map.removeOverlay(gmarker);
      }

      gmarker=new GMarker(point);
       //在点击位置加标记
        map.addOverlay(gmarker);
      }
      );
    }

clearMapCopyRight('map_canvas');
}

// google 地图版权，不是我不尊重版权，而是它令人难以忍受，经常超长超出地图范围，于是乎js强行暴力解决它
// 清理google版权信息
var clearMapCopyRightInterval=null;
function clearMapCopyRight(googleMapDivId){
var googleMapObj = document.getElementById(googleMapDivId);
if(googleMapObj){
     mapDivNodes = googleMapObj.childNodes;
     if(mapDivNodes){
      for(i=0; i<mapDivNodes.length; i++){
      var tmpStr = mapDivNodes[i].innerHTML;
      if(tmpStr && tmpStr.indexOf("地图数据")>-1){
         if(clearMapCopyRightInterval != null){
          window.clearInterval(clearMapCopyRightInterval);
          clearMapCopyRightInterval = null;
         }
        mapDivNodes[i].innerHTML="<a href='http://hi.baidu.com/slzs_zyt/blog/item/44cd764e17d0a100b2de054f.html'><font color='red'>神龙之首©自定义版权</font></a>";
         return;
      }
      }
     }
    }
clearMapCopyRightInterval = window.setInterval(function(){clearMapCopyRight(googleMapDivId)},500);
}

    </script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<center>
   <h1>测试地图效果</h1>
    <div style="position: absolute;z-index: 10;margin-top: 472px;margin-left:5px;background-color: #fff;width: 65px;height: 24px"/><font color='red' ><b>搜索</b></font></div>
    <div style="position: absolute;z-index: 10;margin-top: 583px;margin-left:500px;font-size: 12px;background-color: #fff"/></div>
    <div id="map_canvas" style="width: 95%; height: 500px;background-image:url('http://hiphotos.baidu.com/slzs_zyt/pic/item/498f2924a590b503d507422d.jpg');z-index: 1"></div>
<font style="font-size: 12px;color:blue">介绍说明：地图中有一个添加层，一个固定的标记，一个可拖动的标记，一个可弹出链接地址的自定义图标，google的logo被覆盖，地图移动时，加载部分的底部图片更换为自定义图片，点击地图提示坐标和缩放级别并标记  ---------  0神龙之首0</font>
    </center>
</body>
</html>

<!--
注：你可以全文复制存为html中直接打开测试使用，若不明白可与群友讨论