Google map 谷歌地图 Google地图 V3 第三版-CSDN博客

本文链接：https://blog.csdn.net/iteye_21104/article/details/82367736

Google Maps Javascript API V3 Reference
[url]https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN[/url]
Google Maps API[url]https://developers.google.com/maps/documentation/javascript/?hl=zh-CN[/url]
Flash API[url]https://developers.google.com/maps/documentation/flash/intro?hl=zh-CN[/url]
地址解析[url]https://developers.google.com/maps/documentation/javascript/services?hl=zh-CN[/url]

[img]http://dl.iteye.com/upload/picture/pic/115188/b7565d1e-41f1-3d60-acbc-137adc05c7cc.jpg[/img]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px
}
#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(-34.397, 150.644);
		var myOptions = {
			zoom : 8,
			center : latlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
	}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 600px; height: 400px;"></div>
</body>
</html>

[img]http://dl.iteye.com/upload/picture/pic/115178/3b9568f8-a5e3-3a31-9f0a-00261dbdad06.jpg[/img]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var geocoder;
	var map;
	//实际查询地址
	var query = "文化路红专路";
	//显示名称
	var display = "<b>单位：</b>郑州大学工学院";
	function initialize() {
		geocoder = new google.maps.Geocoder();
		var myOptions = {
			zoom : 17,//缩放比例
			//地图类型 •MapTypeId.ROADMAP •MapTypeId.SATELLITE 
			//•MapTypeId.HYBRID •MapTypeId.TERRAIN 
			mapTypeId : google.maps.MapTypeId.ROADMAP
		}
		map = new google.maps.Map(document.getElementById("map_canvas"),
				myOptions);
		codeAddress();
	}
	function codeAddress() {
		var address = query;
		//地址解析
		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				//依据解析的经度纬度设置坐标居中
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map : map,
					position : results[0].geometry.location,
					title : address,
					//坐标动画效果
					animation : google.maps.Animation.DROP
				});
				var infowindow = new google.maps.InfoWindow({
					content : "<span style='font-size:11px'><b>地址：</b>"
							+ address + "<br>" + display + "</span>",
					//坐标偏移量，一般不用修改
					pixelOffset : 0,
					position : results[0].geometry.location

				});
				//默认打开信息窗口,点击做伴弹出信息窗口
				infowindow.open(map, marker);
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});
			} else {
				alert("未能解析该地址的原因: " + status);
			}
		});
	}
</script>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 600px; height: 400px;"></div>
</body>
</html>