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
Related
I'm working with google.maps.polygons. The library uses a google.maps.MVCArray element to store the vertices of the polygon where each vertex contains a latitude and longitude variable. So I'm able to create fancy polygons on the fly using user mouse clicks.
var listener1 = google.maps.event.addListener(map, "click", function(e) {
var latLng = e.latLng;
var myMvcArray = new google.maps.MVCArray();
myMvcArray.push(latLng); // First Point
var myPolygon = new google.maps.Polygon({
map: map,
paths: myMvcArray, // one time registration reqd only
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.10,
editable: true,
draggable: false,
clickable: true
});
google.maps.event.removeListener(listener1);
var listener2 = google.maps.event.addListener(map, 'click', function(e) {
latLng = e.latLng;
myMvcArray.push(latLng);
console.log(myMvcArray.getArray());
});
});
My problem is, that console log result is incomprehensible. I've spent a couple of hours trying to figure out how to get clean data from myMvcArray. I need to use the data elsewhere.
So it turns out the trick is this:
console.log(myMvcArray.getArray()[0].lat(), myMvcArray.getArray()[0].lng() );
Which returns: XX.XX2157415679654 -XXX.XX782657623291
A For/Each loop will also work.
myMvcArray.getArray().forEach(function(value, index, array_x) {
console.log(" index: " + index + " value: " + value);
})
Which returns:
index: 0 value: (XX.XX2157415679654, -XXX.XX782657623291)
index: 1 value: (XX.XX209255908967, -XXX.XX77514743805)
Info offered in case anybody else has issues here. Note, too, the code above works pretty well for letting users define a google.maps.polygon on a map easily.
You can use JSON.stringify()
So your code would be
console.log(JSON.stringify(myMvcArray.getArray()))
This works because stringify calls the methods on the MVCArray to get the contents whereas log doesn't.
I have following issue with drawing a polygon with google maps api. It looks like that there is to much fillColor. The center of the following polygon is not supposed to have fillColor.
Is it google maps API or is it me who has a bug?
Example: http://jsfiddle.net/zCA2u/
$(function(){
var shape;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var coords = [
new google.maps.LatLng(31.50362, -70.0488),
new google.maps.LatLng(29.91685, -62.4023),
new google.maps.LatLng(22.91792, -56.42578),
new google.maps.LatLng(22.67484, -69.6972),
new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
];
shape = new google.maps.Polygon({
paths: coords,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
draggable: true,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
});
I have now tried the above in IE8 and it renders correct in IE8
If you want to make "holes" in polygons
they aren't supported by the drawing manager directly
you need to have separate paths (the polygon "paths" property takes an array)
the inner paths (the "holes") need to wind in the opposite direction from the inner path
simple example of a polygon with a hole (a donut)
fiddle with self intersection removed and hole
var coords = [
[ new google.maps.LatLng(27.29368, -74.8828),
new google.maps.LatLng(33.06392, -73.3007),
new google.maps.LatLng(34.23451, -66.0058),
new google.maps.LatLng(32.32427, -58.2714),
new google.maps.LatLng(26.35249, -56.4257),
new google.maps.LatLng(18.81271, -60.64453),
new google.maps.LatLng(20.13847, -69.4335)
],
[
new google.maps.LatLng(21.534847,-63.28125),
new google.maps.LatLng(30.221102,-59.677734),
new google.maps.LatLng(30.600094,-71.279297)
]
];
I am showing the tracking on map with marker points and line connecting them.
The problem is that i want to show the direction of travel on the links;
so I am not getting how to show the direction on the line between the marker points.
Is there any way to accomplish this task.
Showing the direction on the polyline can be accomplished with arrows.
There are some predefined paths that the google maps api3 provides.
See this section of the documentation -
SYMBOLS ON POLYLINE, that can be used other than an arrow.
Have a look at this fiddle that uses an arrow to indicate the direction on the polyline.
DEMO with a sigle symbol
You can also set the repeat property for the symbol so that it repeats for regular intervals.
DEMO with repeating symbols
JavaScript-
var iconsetngs = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
path: markers,
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
icon: iconsetngs,
offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);
The interesting feature of this predefined symbol(the forward arrow specially) is that the arrow points towards the exact direction of which your co-ordinates are located. So, that obviously serves the purpose of denoting the direction in a Tracking System.
UPDATE: Not sure about the point you are trying to tell in the comments. The markers can be displayed the same way. Here is the code that adds markers with a loop and also set the polyline with arrows:
DEMO WITH MARKERS AND POLYLINE
Javascript:
var polylineoptns = {
strokeOpacity: 0.8,
strokeWeight: 3,
map: map,
icons: [{
repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
icon: iconsetngs,
offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);
var z = 0;
var path = [];
path[z] = polyline.getPath();
for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
{
var pos = markers[i];
var marker = new google.maps.Marker({
position: pos,
map: map
});
path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
}
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
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);