I have a set of GPS tracker's data in a database. I wish to create traces on maps with different colors for different vehicles. Could any one assist me on how to create a route player on google maps or openstreet maps for static and/or dynamic maps.
For drawing the route you could use some function similar to this, you send routeVar to the function that constains the route's coordinates for the specific vehicle, you can choose the color at the Polyline var:
var route = null;
function drawRoute(mapa, routeVar, varBool){
if(!route){
var coordRoute = routeVar;
route= new google.maps.Polyline({
map: mapa,
path: coordRoute,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
}if(varBool){
route.setMap(mapa);
}else{
route.setMap(null);
}
}
I hope this helps
Related
I want to build a polygon area as pictures using google MAP, you can know how to get the array of coordinates for the area?
picture of desired polygon
You can build a Polygon using an array of lat, lng couples of at least 3 elements.
If the array isn't close, Google Maps will close it by default.
While for the most of DBMS, you must save an array of coordinates that is closed. What does close mean? Essentially, the first and the last points of the array are equal. DBMS like MongoDB will throw an error for bad formatted geospatial data. MongoDB Documentation on $polygon.Another thing to mention is that, MongoDB accepts ONLY lng, lat formatted coordinates.
As you can see from Official Google Maps Documentation on Polygons you can draw a Polygon starting from an array of coordinates:
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
Then you can construct it and set it on the map:
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords, //Array of Coordinates
strokeColor: '#FF0000', //Color of the line
strokeOpacity: 0.8, //Color opacity
strokeWeight: 3, //Line weight
fillColor: '#FF0000', //Inner Color
fillOpacity: 0.35 //Inner color opacity
});
//Set it on the map
bermudaTriangle.setMap(map);
Then, you can add information to your polygon using clickListener and infoWindows
// Add a listener for the click event and opens infoWindow
bermudaTriangle.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
You can read more about infoWindows here.
Finally, here you can find a Plunker I made up using Google Maps Docs and AngularJS. Of course you can do it with pure Javascript.
Last but not least, make sure of having points on the boundaries and with reasonable lat, lng coordinates.
I hope I've been helpful.
I want to draw drag gable route on Google map using encoded poly line string.So that i can drag route , make changes in it and save in database. can anyone have idea regarding this?????
ex: I have following encoded polyline
var encodedPath='iqgnAa|lxMDq##]j#CrIKhBClEIrFMe#oCCKBa#VqAbAqCEWIi#MSg#[oAu#kAu#aAe#{#WcAScA]g#Mm#EaAV_ECKxBl#BL#FDKpB';
var path = google.maps.geometry.encoding.decodePath( encodedPath );
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 8
});
polyline.setMap( map );
I want to draw drag gable path on Google map using this encoded poly line path.
Currently i am able to draw poly line on Google map using following code but its is not drag gable
Any suggestions????
also i want draggable behavior like Google map direction service so that i can deviate the existing path and save for future use
You can make it draggable in the constructor
var polyline = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 8,
draggable: true
});
or later as
polyline.setDraggable(true);
or
polyline.set('draggable',true);
If you use the polyline to render Google's direction services, the paths will be updated along with the polyline when you drag it. Keep in mind that after doing this you will need to persist the new polyline path to the database. This is done by adding listeners to the polyline path
google.maps.event.addListener(polyline.getPath(), 'set_at', function () {
var encodedpath=google.maps.geometry.encoding.encodePath( polyline.getPath() );
SaveMyPath(encodedpath);
});
google.maps.event.addListener(polyline.getPath(), 'insert_at', function () {
var encodedpath=google.maps.geometry.encoding.encodePath( polyline.getPath() );
SaveMyPath(encodedpath);
});
It's up to you to build the function SaveMyPath
I cant find any useful answer for my questions. I exported points from kml. now i must connect this point with line on google maps api v3. how can i do it?
Like this (gLine is a global var, gTheMap is the Google map object);
// draw a line connecting the points
var Endpoints = [marker1.position, marker2.position];
if (gLine == null)
{
gLine = new google.maps.Polyline(
{ path: Endpoints,
strokeColor: "#FFFF00",
strokeOpacity: 1.0,
strokeWeight: 2,
map: gTheMap
});
}
else
gLine.setPath(Endpoints);
I blogged about this here.
I need to draw shortest plane path on a map.
I created KML in Google Earth and loaded int to Google Map. As you can see attached images: paths is very different: Google Vap path is longer.
How to draw arc path on Google map?
In V3, it's simply adding the geodesic: true option to your Polyline.
Demo http://jsfiddle.net/yV6xv/20/ Click on the map to define path endpoints
var myLine = new google.maps.Polyline({
map: map,
geodesic: true
});
var path = [];
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.Marker({map:map,position:event.latLng});
path.push(event.latLng);
myLine.setPath(path);
});
This example is for the API V2, but the math is the same for V3:
http://maps.forum.nu/gm_flight_path.html
Marcelo.
I am using google map api version 3 . Now i want to link markers with line, so that a path can be created between the markers.
Any solution ?
To create line between two markers
use this
var Polyline_Coordinates = [
new google.maps.LatLng(42.357778,-71.061667), // your location lattitude and longitude
new google.maps.LatLng(40.716667,-74),
new google.maps.LatLng(41.836944,-87.684444),
new google.maps.LatLng(34.05,-118.25)
];
var Polyline_Path = new google.maps.Polyline({
path: Polyline_Coordinates,
strokeColor: "#000000",
// color of the outline of the polyline
strokeOpacity: 1.0,
// between 0.0 and 1.0
strokeWeight: 5
// The stroke width in pixels
});
Polyline_Path.setMap(map);