google.maps Simple Polylines
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple?hl=zh-cn
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-cn#PolylineArrays
http://ubilabs.github.io/google.maps.polyline.edit/examples/advanced.html
http://www.cnblogs.com/hanbin/archive/2011/04/18/2019889.html
var polyOptions ={ strokeColor:'#000000', strokeOpacity:1.0, strokeWeight:3} poly =new google.maps.Polyline(polyOptions); poly.setMap(map);var path =newMVCArray; $.getJSON('json.php',function(data){//var items = []; $.each(data,function(key, val){ path.push(new google.maps.LatLng(val.lat, val.longi));});// now update your polyline to use this path poly.setPath(path);});PS: Your HTML structure is all wrong:
<bodyonload="initialize()"><divid="map_canvas"style="width:90%;height:100%"></div></body></html><html><head></head><body></body></html>shouldn't that just be
<bodyonload="initialize()"><divid="map_canvas"style="width:90%;height:100%"></div></body></html>-----------------------------------------------------
<scripttype="text/javascript">var poly;var map;function initialize(){var latlng =new google.maps.LatLng(38.698044,-77.210411);var myOptions ={ zoom:8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };//map is already declared//var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); map =new google.maps.Map(document.getElementById("map_canvas"),myOptions);var polyOptions ={ strokeColor:'#000000', strokeOpacity:1.0, strokeWeight:3} poly =new google.maps.Polyline(polyOptions); poly.setMap(map);var path =newMVCArray;// every time the path is updated, automatically the map will update the polyline poly.setPath(path); $.getJSON('json.php',function(data){//var items = []; $.each(data,function(key, val){ path.push(new google.maps.LatLng(val.lat, val.longi));});});var myOptions ={ zoom:12,//center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN };}</script>