Here is just the Google Map API to tell you how to use, is a good point, for some reason, Google has been away from everyone.
<! DOCTYPE html>
<title>GeoLocation</title>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no" >
<meta charset= "Utf-8" >
<style>
HTML, body, #map-canvas {
margin:0;
padding:0;
height:100%;
}
</style>
<script src= "Https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false "></script>
<script>
var map;
var Poly;
function Initialize () {
var mylatlng = new Google.maps.LatLng (31.1937077, 121.4158436);
var locations = [
[' Test1, accuracy:150m ', 31.1937077, 121.4158436, 100],
[' Test2, accuracy:150m ', 31.2937077, 121.4158436, 100],
[' Test3, accuracy:150m ', 31.0937077, 121.2158436, 100],
[' Test4, accuracy:150m ', 31.3937077, 120.4158436, 100],
[' Test5, accuracy:150m ', 31.1637077, 120.4858436, 100],
[' Test6, accuracy:150m ', 31.1037077, 121.5158436, 100]
];
var mapoptions = {
Zoom:13,
CENTER:MYLATLNG,
MapTypeId:google.maps.MapTypeId.ROADMAP
};
Map = new Google.maps.Map (document.getElementById (' Map-canvas '),
Mapoptions);
Line settings
var polyoptions = {
Strokecolor: ' #00ff00 ',//color
strokeopacity:1.0,//Transparency
Strokeweight:4//Width
}
Poly = new Google.maps.Polyline (polyoptions);
Poly.setmap (map); Loading
/* Loop mark all coordinates * *
/*for (var i=0; i<locations.length; i++) {
var loc = [];
Loc.push (locations[i][1]);
Loc.push (locations[i][2]);
var path = Poly.getpath (); Get the coordinates of a line
Path.push (New Google.maps.LatLng (loc[0], loc[1)); Add marker coordinates to a line
Generate Tag icon
Marker = new Google.maps.Marker ({
Position:new Google.maps.LatLng (loc[0], loc[1]),
Map:map
Icon: "Https://maps.gstatic.com/mapfiles/markers/marker_green.png"
});
}*/
var marker, I, circle;
var iwarray = [];
var Infowindow;
var latlngbounds = new Google.maps.LatLngBounds ();
var iconyellow = new Google.maps.MarkerImage ("Http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
for (i = 0; i < locations.length; i++) {
var loc = [];
Loc.push (locations[i][1]);
Loc.push (locations[i][2]);
var path = Poly.getpath (); Get the coordinates of a line
Path.push (New Google.maps.LatLng (loc[0], loc[1));
var latlng = new Google.maps.LatLng (locations[i][1], locations[i][2]);
Latlngbounds.extend (LATLNG);
if (Locations[i][0].indexof ("[Cached") = = 0 | | (Locations[i][0].indexof ("[multiple") = = 0 && locations[i][0].indexof ("[Cached") >= 0)) {
Marker = new Google.maps.Marker ({
POSITION:LATLNG,
Map:map,
Icon:iconyellow
});
var iw = ' <div style= ' font-size:12px;word-wrap:break-word;word-break:break-all; ><strong><font color= "#FF0000" > ' + locations[i][0] + ' <font></strong><div> ';
} else {
Marker = new Google.maps.Marker ({
POSITION:LATLNG,
Map:map
});
var iw = ' <div style= ' font-size:12px;word-wrap:break-word;word-break:break-all; ><strong><font color= "#000000" > ' + locations[i][0] + ' <font></strong><div> ';
}
Iwarray[i] = IW;
Google.maps.event.addListener (marker, ' mouseover ', (function (marker,i) {
return function () {
Infowindow = new Google.maps.InfoWindow ({
Content:iwarray[i],
MAXWIDTH:200,
Pixeloffset:new google.maps.Size (0, 0)
});
Infowindow.open (map, marker);
}
}) (Marker,i));
Google.maps.event.addListener (marker, ' mouseout ', function () {
Infowindow.close ();
});
Circle = new Google.maps.Circle ({
Map:map,
RADIUS:LOCATIONS[I][3],
FillColor: ' #0000AA ',
fillopacity:0.01,
Strokeweight:1,
Strokecolor: ' #0000CC ',
strokeopacity:0.8
});
Circle.bindto (' center ', marker, ' position ');
}
Map.fitbounds (Latlngbounds);
var listener = google.maps.event.addListenerOnce (map, "Idle", function ()
{
var zoomlevel = parseint (Map.getzoom ());
if (Zoomlevel > 13)
Map.setzoom (13);
});
}
Google.maps.event.addDomListener (window, ' Load ', initialize);
</script>
<body>
<div id= "Map-canvas" ></div>
</body>
