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>