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
Related
I have a map where I need to place markers for locations drawn from a database. The locations can be from one end of the country to the other and I want to limit marker placement to only the visible map area.
What segments of the api cover this? Are there any best practices for handling this use case?
You can get the bounds of the map with:
bounds = map.getBounds();
The result is a LatLngBounds object. Then for a marker marker, you can test if it is in the map with:
if ( bounds.contains(marker.getPosition()) ) {
}
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.
This is somewhat similar to the question asked here --
I'm writing a search box for a map application, which retrieves a whole set of search results (people's names & info) at once from a server and then pages through the list of results. So at any given point on the map there are two kinds of markers -- a background marker for points which are in the search results but not in the current page, and a foreground marker for points which are in the current page of search results.
All this works nicely.. what I'd like to do now is set it up so that if a user zooms or pans the map, the search results list updates to show only markers within the current map bounds.
Obviously there are server-side ways to do this, or I could also just run through the whole list of markers to see which fit within the current bounds; but does anybody know a built-in way to do this within leaflet? Something which would look like map.getVisibleLayers()?
I think this may be of help:
https://github.com/stefanocudini/leaflet-list-markers
as you can see from the demo, including all markers in a layer, this plugin shows a list of only those visible in the current viewport.
Its usage is simple, in a row:
var markersLayer = new L.LayerGroup();
map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );
The code for obtain it is like as:
var layers = L.LayerGroup(), //layers contains all markers..
contained = []; //makers in map boundingbox
layers.eachLayer(function(l) {
if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) )
contained.push(l);
});
Here's a fully working function that does the job:
// var map is an instance of a Leaflet map
// this function assumes you have added markers as GeoJSON to the map
// it will return an array of all features currently shown in the
// active bounding region.
function getFeaturesInView() {
var features = [];
map.eachLayer( function(layer) {
if(layer instanceof L.Marker) {
if(map.getBounds().contains(layer.getLatLng())) {
features.push(layer.feature);
}
}
});
return features;
}
You have to check the bounds of each layer versus the map's bounds. Because eachLayer() returns all layers regardless of whether they are in the visible extent.
if(map.getBounds().contains(layer.getLatLng())) { ... }
In Stefano's code, this is shown around this line:
https://github.com/stefanocudini/leaflet-list-markers/blob/master/src/leaflet-list-markers.js#L95
Regarding the last part of your question, if you want to iterate through visible layers, you can use eachLayer, e.g:
map.eachLayer(function (layer) {
// do something with the layer
});
API reference: http://leafletjs.com/reference.html#map-stuff-methods
I have to show several brands on my google maps, one can be a very distant from the other, How i can calculate the point where i center my map, anyone can give me tips to do this, thanks
You can use the fitBounds method to help you show all items on the map at the correct zoom level:
var bounds = new google.maps.LatLngBounds();
//you can run this in a loop for all points/markers
bounds.extend(markerLatLng);
//finally
map.fitBounds(bounds);
I would like to get marker through ajax as my map move. However, is there any method to avoid loading marker with the same latitude and longitude on google map? Let say once the marker for a certain latitude and longitude is loaded, it will not be added the second time when the map is move back to the location. Thank you.
Keep an array of markers and look at it before loading new markers, to ensure they haven't already been loaded. As each new marker is added, append it to the array.
Store the markers in an object "hash" and key it on lat-long.
Thus:
var marker_dict = {}, i=0, l=latLongArray.length, lat, lng;
while ( i < l ) {
lat = latLongArray[i][0], lng = latLongArray[i][1]
marker_dict[lat + '-' + lng] = new google.maps.Marker(
new google.maps.LatLng(lat, lng)
);
i++;
}
Then, as you are adding in new markers, simply make sure to check that the key is not already in your marker_dict.
That way you don't have to loop over (potentially) the entire array every time the map is moved.
In order to create markers, you must have the lat and long data somewhere. Just be sure this set of data doesn't contain duplicates before calling the method to create the marker.
For example, I have an array of lat and long values, var latLong = [ [1.8, 2.6], [3.4, 1.1], ...];. I can iterate through this array and remove the duplicates. Then pass the resulting data set to my marker creator routine.
You can remove all the markers when the viewport is changing and retrieving the new markers for the current viewport and display them.
If you want all the markers to be kept on the map which i don't recommend because of the speed reducing you can push all the newcome markers to an array and make some kind of check(if the marker already exists in this array don't push).