I can't seem to find a way to get the latitude and longitude from existing markers in MapQuest.
I currently set my directions map using:
var map = L.mapquest.map('map', {
center: [selfLatitude, selfLongitude],
layers: L.mapquest.tileLayer('map'),
zoom: 13
});
L.mapquest.directions().route({
start: [selfLatitude, selfLongitude],
end: [otherLatitude, otherLongitude]
});
This produces a Map with the two points and the direction between them.
I am able to move the end point on the map but want to capture the modified latitude and longitude.
What is the proper way to target and get the coordinates from individual markers in a MapQuest Map using the mapquest.js javascript library?
I thought this would be an easy solution, but I could not find anything easily in their documentation. I tried picking apart their examples and looking everywhere for bit of information. After assuming this would work, but didn't because getLatLng() is not a function:
popup.on('dragend', function(event) {
var marker = event.target;
var position = marker.getLatLng().wrap();
showLL(position, 'USER_DEFINED');
});
At some point I decided to stop looking at the doc's they provided and tried to look at their Lat/Long finder example and look further into the event.target object that was returned and tried to find anything related to the lat and long.
I know you asked for a "proper" way, but I honestly couldn't find one and thought I should share anyways.
The below is def not an official way to do this, but I believe it works. For some reason the moveend event is fired whether the start or end is moved, but I only log the end lat/long anyways.
I noticed that marker._layers[prop].locationIndex was mixed in the layers obj and 0 seems to correlate to the start marker and 1 seemed to point to the end marker.
Here's what I came up with:
let latLng1 = new L.LatLng(35.6009, -82.554);
let latLng2 = new L.LatLng(35.7796, -78.6382);
let map = L.mapquest.map('map', {
center: latLng1,
layers: L.mapquest.tileLayer('map'),
zoom: 13
});
let directions = L.mapquest.directions();
directions.route({
start: latLng1,
end: latLng2
});
map.on('moveend', function(event) {
let marker = event.target;
for (let prop in marker._layers) {
if (!marker._layers.hasOwnProperty(prop)) continue;
// locationIndex- I am assuming 0 for start marker and 1 for end marker.
if (marker._layers[prop].locationIndex === 1) {
let latLong = marker._layers[prop]._latlng;
console.log(latLong)
}
}
});
}
Related
i want to use the addLatLng function to add a new point to my multipolyline. I am able to use the function with a normal single polyline, but with for example two lines, i don't know how i can access the second ring to add the new point.
I have tried some of those...
var polyline = L.polyline([[], []], {color: generateRandomColor()}).addTo(map);
var point = {lat: lat, lng: long};
var arr = polyline.getLatLngs();
polyline[1].addLatLng(point); //nope
polyline.addLatLng(arr[1], point); //nope
polyline.addLatLng(point) //yes but adds to the first polyline
I also can't understand the hint from the docs -
addLatLng( latlng, <LatLng[]> latlngs?)
Adds a given point to the polyline. By default, adds to the first ring of the polyline in case of a multi-polyline, but can be overridden by passing a specific ring as a LatLng array (that you can earlier access with getLatLngs).
Can you please give me an example in javascript code?
Thank you so much!
You add the ring in the wrong order. Use following:
polyline.addLatLng(point, arr[1]); //yep
I've got an array of Google Maps Markers that I get after clicking on cluster.
I would need to check if the markers of this array have the same position. Because I can find myself in the situation where it could be, where in one cluster all of markers have the same position.
There is my code :
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
map.setCenter(markers[0].getPosition());
map.setZoom(map.getZoom()+10);
for(i in markers) {
// Here, how to compare each marker (by comparing the position) between them of markers ?
markers[i].setMap(cluster.getMap());
marker = markers[i];
}
cluster.clusterIcon_.hide();
setTimeout(function(){
google.maps.event.trigger(marker, 'click');
},100);
});
So my question, is how to compare each marker (by comparing the position) between them of markers array ? How to check if they have the same position ?
Thanks.
EDIT :
I found the solution :
const bounds = cluster.getBounds();
const areMarkersCoincident = bounds.getNorthEast().equals(bounds.getSouthWest());
Thanks for your help !
It depends on what you are trying to achieve.
For example, if you just need a simple clustering solution you can just use google maps marker clusters: https://developers.google.com/maps/documentation/javascript/marker-clustering
But for something else you can just compare positions of the markers.
For that, you have latitude and longitude.
Here you can read the documentation of LatLng class in google maps and see that it has method equals which can compare two coordinates. https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLng
But don't forget that in some cases you might need to compare not just marker positions, but also if the marker icons intersect. For that, you can either use LatLngBounds https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBounds and it has a method contains
I am trying to programmatically click on a marker, and I found this:
var marker = new google.maps.Marker({});
new google.maps.event.trigger( marker, 'click' );
It works well, but the code creates a new marker.
What I don't know how to do, is to "query" a marker that is already on the map by it's coordinates (lat and lng)
So, var marker would be something like this:
var marker = google.maps.query(lat, lng);
Any ideas how to do it?
You should add all marker in array:
var markersArray = [];
markersArray.Push(marker);
Then on search:
if (markersArray) {
for (i in markersArray) {
if(markersArray[i].position.lat() == 'yourlat' && markersArray[i].position.lng() == 'yourlng' )
new google.maps.event.trigger( markersArray[i], 'click' );
}
}
this not tested. Just an idea.
The idea by #Irfan works with a minor change.
Google happens to add precision to markers. For example a marker added at (60.1234, 20.5678) will return a lat/lng such as (60.1234xxxxxx, 20.5678xxxxx).
So comparing marker position returned from map to the lat/lng you used to set position of the markers wont work, possible solutions include rounding the values and then comparing or using some other parameters for comparison.
I'm trying to figure out how to sort the first 10 Markers on a Google map by distance from the center of the map in Javascript. So, let's say I have 100 Markers in an array, and I want to display more information about the first 10 closest markers in a HTML unordered list. How would I go about doing that?
I found a similar example for Google Maps API version 2 here, but nothing for version 3.
Whatever happens You need to calculate all distances. You can do it yourself with simple equations or use Google's geometry library: http://code.google.com/intl/pl-PL/apis/maps/documentation/javascript/geometry.html and its function: computeDistanceBetween(). Then store distance in custom marker property like e.g:
marker.distance = google.maps.geometry.spherical.computeDistanceBetween(marker.position, center.position);
and sort it anyway you want.
Hope it helps.
Sort the array by proximity to your map's centre point. Use sort().
Slice the first 10 with slice().
Plot these on the map.
There are a few questions like this on StackOverflow but none of them really show a complete example that is easy to read and understand, so I put one together. This is using the lodash/underscore sortBy function for the sorting.
const map = new google.maps.Map('#map', { center: { lat: 47.6541773, lng: -122.3500004 } });
const markers = [
new google.maps.Marker({ position: { lat: 47.6485476, lng: -122.3471675 }, map }),
new google.maps.Marker({ position: { lat: 47.6606304, lng: -122.3651889 }, map })
// ...
];
const sortedMarkers = _.sortBy(markers, marker => {
google.maps.geometry.spherical.computeDistanceBetween(
marker.position,
map.getCenter()
)
});
const firstTenSortedMarkers = sortedMarkers.slice(10);
The sortBy function iterates through each marker in the array and sorts the list based on the value returned by the function that is it's second argument. The computeDistanceBetween function returns a number representing the distance in meters between the map center and the marker position, which is easy to sort on.
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.