JSP 页面 嵌入 google API 地图

网站中显示和使用google地图主要是通过javascript调用google api。首先要根据域名到google官网上申请一个key，地址：

http://code.g...s/signup.html

申请完成后，用你的key代替下面代码的key。

 

JavaScript 代码复制内容到剪贴板

<script src="http://maps.g...5a3_FEg" type="text/javascript"></script>
<script src="http://maps.g...5a3_FEg"></script>

在页面中可以用一个div来显示：

 

XML/HTML 代码复制内容到剪贴板

<div id="map" style="height:450px;width:99%;border:solid 1px #00000;display:none"></div> <br>

下面是加载地图的代码：

 

JavaScript 代码复制内容到剪贴板

<script type="text/javascript">
    //address是要显示的地址
    function showAddress(address) {
        document.getElementById("map").style.display="";
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());    //放大缩小
            map.addControl(new GMapTypeControl());     //地图种类
            map.enableScrollWheelZoom();    //启用鼠标滚轮
            var geocoder = new GClientGeocoder();
            geocoder.getLatLng(address,
                function(point) {
                    if (!point) {
                        alert(address + " not found");
                    } else {
                        map.setCenter(point, 13);
                        var latln = map.getCenter();
                        var longitude = latln.lng();
                        var latitude = latln.lat();
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml("地址：" + address + "<p> </p>" + "经度："
                                + longitude + " 纬度：" + latitude);
                    }
                }
            );
       }
    }
</script>
</head>

如果要创建标记内容以及标记的鼠标事件，可以用下面的代码：

 

JavaScript 代码复制内容到剪贴板

<script>
    function createMarker(point, address, name, qq) {  //创建标记内容及标记的鼠标事件
        var marker = new GMarker(point);
        var html = '<div>'+
                   '<a >姓名:'+ name +'</a><br/>'+
                   '<a >地址:'+ address +'</a><br/>'+
                   '<a >QQ:'+ qq +'</a>'+
                   '</div>';
        GEvent.addListener(marker, "mouseover", function() {
             marker.openInfoWindowHtml(html);
        });
        GEvent.addListener(marker, "mouseout", function() {
             marker.closeInfoWindow();
        });
        GEvent.addListener(marker, "click", function() {
             map.setCenter(point, 12);
        });
             return marker;
        }
        var point = new GLatLng(23.25675,133.33338);     // 设置标记
        map.addOverlay(createMarker(point,'广州市天河区天河路','小林','452655443'));//加入标记

    }
</script>