网站中显示和使用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>