Google Maps JavaScript API v3
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn
GPSspg
http://www.gpsspg.com/maps.htm
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map
var latLngArray = [
{
name: 'hangzhou',
url: 'http://s.baomihua.com/phone/home.aspx#hangzhou',
longitude: 30.27211440480,
latitude: 120.15266418460
},
{
name: 'shanghai',
url: 'http://s.baomihua.com/phone/home.aspx#shanghai',
longitude: 31.2274816320,
latitude: 121.4772033691
},
{
name: 'beijing',
url: 'http://s.baomihua.com/phone/home.aspx#beijing',
longitude: 39.8970943726,
latitude: 116.4056396484
}
]
var markersArray = [] function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(31.2081033213, 121.4758300781)
} map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions) if (latLngArray) {
for (var i in latLngArray) {
addMarker(new google.maps.LatLng(latLngArray[i].longitude, latLngArray[i].latitude), latLngArray[i].url)
}
} showOverlays()
} function addMarker(location, url) {
var marker = new google.maps.Marker({
position: location,
map: map
})
markersArray.push(marker)
} function showOverlays() {
if (markersArray) {
for (var i in markersArray) {
markersArray[i].setMap(map)
markersArray[i]._index = i
google.maps.event.addListener(markersArray[i], 'click', function() {
location.href = latLngArray[this._index].url
})
}
}
} google.maps.event.addDomListener(window, 'load', initialize)
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>