JSP 页面 嵌入 google API 地图

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

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

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

1. JavaScript 代码复制内容到剪贴板  
2.       
3. <script src="http://maps.g...5a3_FEg" type="text/javascript"></script>        
4. <script src="http://maps.g...5a3_FEg"></script>    

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

1. XML/HTML 代码复制内容到剪贴板  
2.       
3. <div id="map" style="height:450px;width:99%;border:solid 1px #00000;display:none"></div> <br>    

下面是加载地图的代码：

1. JavaScript 代码复制内容到剪贴板  
2.       
3. <script type="text/javascript">        
4.     //address是要显示的地址      
5.     function showAddress(address) {        
6.         document.getElementById("map").style.display="";        
7.         if (GBrowserIsCompatible()) {             
8.             var map = new GMap2(document.getElementById("map"));           
9.             map.addControl(new GSmallMapControl());    //放大缩小            
10.             map.addControl(new GMapTypeControl());     //地图种类            
11.             map.enableScrollWheelZoom();    //启用鼠标滚轮            
12.             var geocoder = new GClientGeocoder();        
13.             geocoder.getLatLng(address,        
14.                 function(point) {        
15.                     if (!point) {        
16.                         alert(address + " not found");        
17.                     } else {        
18.                         map.setCenter(point, 13);        
19.                         var latln = map.getCenter();        
20.                         var longitude = latln.lng();        
21.                         var latitude = latln.lat();        
22.                         var marker = new GMarker(point);        
23.                         map.addOverlay(marker);        
24.                         marker.openInfoWindowHtml("地址：" + address + "<p> </p>" + "经度："      
25.                                 + longitude + " 纬度：" + latitude);        
26.                     }        
27.                 }        
28.             );        
29.        }          
30.     }        
31. </script>        
32. </head>    

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

1. JavaScript 代码复制内容到剪贴板  
2.       
3. <script>        
4.     function createMarker(point, address, name, qq) {  //创建标记内容及标记的鼠标事件            
5.         var marker = new GMarker(point);            
6.         var html = '<div>'+            
7.                    '<a >姓名:'+ name +'</a><br/>'+            
8.                    '<a >地址:'+ address +'</a><br/>'+            
9.                    '<a >QQ:'+ qq +'</a>'+            
10.                    '</div>';            
11.         GEvent.addListener(marker, "mouseover", function() {            
12.              marker.openInfoWindowHtml(html);            
13.         });            
14.         GEvent.addListener(marker, "mouseout", function() {            
15.              marker.closeInfoWindow();            
16.         });            
17.         GEvent.addListener(marker, "click", function() {            
18.              map.setCenter(point, 12);             
19.         });            
20.              return marker;            
21.         }            
22.         var point = new GLatLng(23.25675,133.33338);     // 设置标记            
23.         map.addOverlay(createMarker(point,'广州市天河区天河路','小林','452655443'));//加入标记            
24.              
25.     }                
26. </script>        

     本文转自06peng 51CTO博客，原文链接：http://blog.51cto.com/06peng/962519，如需转载请自行联系原作者