I am having a map with some polylines with the distance [api v3]. I want that when someone drag the polyline at the same time the distance also get updated but dont know how to do. Please help me, any good tutorial or another threads are most welcome
Thanks for helping me
Naveen
This page describes using draggable markers and updating the distance when a marker is moved.
http://exploregooglemaps.blogspot.com.br/2012/02/measuring-distance-with-markers.html
There is a attribute which makes your polyline editable.
polyPath.setEditable(true);
Now use a listener to check the editing.
google.maps.event.addListener(polyPath, 'capturing_changed', function() {
var array = polyPath.getPath(); //getPath() gives u array of current markers latlng over map
var tempDistance = 0;
var tempPathArray = [];
for(i = 0; i < array.length; i++){
tempPathArray.push(array.getAt(i));
}
for(k = 1; k < tempPathArray.length; k++)
{
var calculateNewDistance=google.maps.geometry.spherical.computeDistanceBetween(tempPathArray[k-1],tempPathArray[k]);
tempDistance += calculateNewDistance;
}
}
// make sure to add the following script to compute the distance between two latlngs
Related
Need some help with google maps polygon areas. I have a many markers plotted across the google map. Have some polygon areas plotted on map too. I want to find the total of marker points covered by a polygon, whenever the polygon area is clicked. Kindly guide or provide some good links in this direction
Thanks.
You could try ray casting algorithm. The implementation would be something like this:
var markers = []; // list of your markers
var polygonPath = polygon.getPath();
var location;
for (var i = 0; i < markers.length; i++) {
location = markers[i].getPosition();
console.log(isPositionInside(location.lat, location.lng, polygonPath));
}
function isPositionInside(mLat, mLng, polygonPoints) {
var isInside = false;
for (var a = 0, b = polygonPoints.length - 1; a < polygonPoints.length; b = a++) {
var aLng = polygonPoints[a].lng,
aLat = polygonPoints[a].lat,
bLng = polygonPoints[b].lng,
bLat = polygonPoints[b].lat;
if ((aLng > mLng) != (bLng > mLng) && (mLat < (bLat - aLat) * (mLng - aLng) / (bLng - aLng) + aLat)) {
isInside = !isInside;
}
}
return isInside;
};
This isn't the most optimal solution, as you can read in the wiki article, but in most cases it will get the job done.
Trying to create a new version of the map functions seen here: http://www.daftlogic.com/projects-google-maps-distance-calculator.htm
but using the v3 api.
So far I am able to set markers on click and can draw the geodesic polyline.
The issues I am currently running into are:
Updating the poly-line on marker drag
I'm pretty sure I have to put each marker in an array and do a for
loop so that I can keep clicking and adding points that will add to
the total distance.
Properly displaying distance.
I have created a jsfiddle: http://jsfiddle.net/wyZyS/
EDIT: I realize I have nothing calling the "update" function. I am trying to create the array for each marker currently. The calculation you see is converting meters to nautical miles.
I wrote something like this a while ago as an exercise. Sadly it works properly only in Chrome, it has strange bugs in other browsers. The distance function should work in IE9.
The idea I had was to add drag listeners to your markers and keep a single polyline representing the path, updating its paths as the markers are dragged.
DEMO http://freezoo.alwaysdata.net/freezoomaps/freezoomaps.html
google.maps.event.addListener(tmpNode, 'drag', function(event) {
distance.drawPath();
});
distance.drawPath = function() {
distance.countNodes();
var coords = [];
for (var i = 0; i < distance.nodes.length; i++) {
coords.push(distance.nodes[i].getPosition());
}
distance.line.setPath(coords);
meters = google.maps.geometry.spherical.computeLength(coords);
$("#distance_km").val((meters/1000).toFixed(3));
$("#distance_mi").val((meters/1609.344).toFixed(3));
}
distance.countNodes = function() {
var count = 0;
for (var i = distance.nodes.length - 1; i >= 0; i--) {
if (distance.nodes[i].getMap() == null) {
distance.nodes.splice(i, 1);
}
else {
count++;
}
}
return count;
}
distance.clearNodes = function() {
for(var i = 0; i < distance.nodes.length; i++) {
distance.nodes[i].setMap(null);
}
distance.drawPath();
}
My app shows two kinds of markers: locations and items. I would like to be able to drag and drop items onto locations.
But when a marker is dragged, the mouseover event on the markers it is dragged over are not triggered.
If someone know a way to create this effect, I'd be eternally greatfull :-)
I think your best bet would be to implement it based on distance to the target, either real world distance in meters or screen distance in pixels.
For example:
var locations = Array();
var items = Array();
and then:
var itemMarker = new google.maps.Marker(opts);
google.maps.event.addListener(itemMarker, 'drag', function(){
for( var n = 0; n < locations.length; n++){
var d = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(),locations[n].getPosition());
if (d < 5){
// do something when below a given threshold.
}
}
});
items.push(itemMarker);
Demo here:
http://maps.forum.nu/v3/gm_template_simple.html
(Drag the Omaha marker towards Chicago.)
Remember to load the geometry library when you load the API.
I have a google maps app which plots markers as it loads. One of the new requirment is to to add a Polygon overlay encompassing a selection of markers by the user. I was able to achieve that using the Geometry Controls of the GMaps Utility Library
Now, the next step is to form a group of the selected markers for which I would need to determine if the lat lngs of the markers falls within the lat lngs of the polygon? Is there a way to determine the lat lngs of a polygon and compute if the marker's lat lng is within its boundaries?
I have never directly messed around with Google Maps, but you can store the points that make up the polygon and then use the Point-In-polygon Algorithm to check if a given longitude and latitude point is within a polygon or not.
// Create polygon method for collision detection
GPolygon.prototype.containsLatLng = function(latLng) {
// Do simple calculation so we don't do more CPU-intensive calcs for obvious misses
var bounds = this.getBounds();
if(!bounds.containsLatLng(latLng)) {
return false;
}
// Point in polygon algorithm found at http://msdn.microsoft.com/en-us/library/cc451895.aspx
var numPoints = this.getVertexCount();
var inPoly = false;
var i;
var j = numPoints-1;
for(var i=0; i < numPoints; i++) {
var vertex1 = this.getVertex(i);
var vertex2 = this.getVertex(j);
if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}
j = i;
}
return inPoly;
};
Following npinti's suggestion, you may want to check out the following point-in-polygon implementation for Google Maps:
Check if a polygon contains a coordinate in Google Maps
This has been updated in v3. You can do this calculation via the google.maps.geometry.poly namespace API Documentation
I need to remove the Direction paths drawn on Google map? I know how to remove markers, but when you remove markers path is not getting cleared. Is there a way to remove the direction path than creating map from the beginning again?
Yes, it's the same way as removing the markers (Google is using the setMap as a standard now).
A good practice is always define a global array variables for your markers, polylines and directions..etc:
var markers = [];
var drArr = [];
var pArr = [];
...
// whenever you set a marker, add it to the markers array
markers.push(marker);
...
// whenever you create a DirectionsRenderer instance, add it to the DirectionsRenderer array
drArr.push(directionsRenderer);
...
// whenever you create a Polyline instance, add it to the Polyline array
pArr.push(polypath);
// This is used to reset the map
function resetMap() {
// remove Markers
for(i=0; i < markers.length; i++)
markers[i].setMap(null);
// remove DirectionsRenderers
for(i=0; i < drArr.length; i++)
drArr[i].setMap(null);
// remove Polylines
for(i=0; i < pArr.length; i++)
pArr[i].setMap(null);
}
as you can see, you can seperate the resetMap function to functions (like resetMarkers..etc).
Hope this help.