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>