googlemap 示例 _Web前端

google地图示例
有遮罩层有标记提示，可以动态查询地址的经纬度。下面是代码
<html>
<head>
<title>google map v3</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
  var map;
  
  function createMap(address){
		if(address == null || address=="") return false;
		geocoder = new google.maps.Geocoder();
		if(geocoder){
			geocoder.geocode({address:address},function(results,status){
				if(status == google.maps.GeocoderStatus.OK){
				     var location = results[0].geometry.location;
					 var options = {
					     zoom:16,
						 center:location,
						 mapTypeId:google.maps.MapTypeId.ROADMAP
					 };
					 map =new google.maps.Map(document.getElementById("map_canvas"),options);
					 var marker = new google.maps.Marker({
						map: map, 
						position: location,
						title:address
					});
					var infowindow = new google.maps.InfoWindow({ 
						content: "<div>"+address+"</div>",
						size: new google.maps.Size(50,20),
						position:location,
						pixelOffset:new google.maps.Size(5,5)
					});
					infowindow.open(map);
				}else {
					alert("Geocode was not successful for the following reason: " + status);
				}
			
			});
		
		}
		
  }
  
  function initialize() {
    createMap("your address  e.g: 北京");
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
		  map.setZoom(16);
          var marker = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location,
			  title:address
          });
		  var infowindow = new google.maps.InfoWindow({ 
		        content: "<span>"+address+"</span>",
                size: new google.maps.Size(40,10),
                position: results[0].geometry.location,
				pixelOffset:new google.maps.Size(5,5)
          });
		infowindow.open(map);
		}
     });
  } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
  }
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 800px; height: 600px;margin:0 auto;"></div>
  <div>
    <input id="address" type="textbox" value="your address eg:北京">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>
</html>