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()) ) {
}
Related
I'm using google maps api 3 along with agm (angular google maps) to place a lot of custom markers on the map. Some of these markers are low priority so i've implemented clustering (using markerClusterer) on those markers to help with performance.
However the higher priority markers need to always be above the clusters, currently clusters appear to be on their own layer and that layer is always above the markers layer.
Is there a way to force clusters and markers to be on the same layer, so I can implement a zIndex? Or at the very least, force the makers layer to be above the clusters layer.
Or alternatively, could we detect if clusters are over markers, and shift the cluster so that it's out of the way.
After working on it for ages, I found the only way to do this is to create a pane so that the getPanes method is available, from there you move the markerLayer (where the markers live) to the overlayMouseTarget, here is a semi working example:
First, set the zIndex of the marker, or markers
marker.setZIndex(9999);
marker.setMap(this.map);
I use a pretty lengthy method of checking json info in order to change the zIndex number, so for this example i'll just say all markers need to be above the cluster, then in any markers that I plan to put into the cluster, I set that marker to 10 and push to an array, then set that array to the markercluster. Now onto the layering:
const overlay = function() {};
overlay.prototype = new google.maps.OverlayView();
overlay.prototype.onAdd = function() {
const panes = this.getPanes();
for(let i = 0; i < panes.markerLayer.childNodes.length; i++) {
panes.overlayMouseTarget.appendChild(panes.markerLayer.childNodes[i]);
}
console.log(panes.overlayMouseTarget);
};
const x = new overlay();
x.setMap(this.map);
With this, this pushes all the markers and cluster into the same dom element, so the zIndex is respected.
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 have different sites drawn on google map(basically polygon/circle). A site can be anywhere in the world on google map. I have center lat and long of sites(polygon/circle) in an array and I want to set the zoom level of the map so that all the sites can be seen in one view.
For e.g. if there is only one site to display in map, zoom level should be more.
Please help me in this. I am looking for javascript code.
try this hint
var latlngBounds = new google.maps.LatLngBounds();
array of latlng object;
for(i=0;i<array.length;i++){
latlngBounds.extend(array[i]);
}
map.fitBounds(latlngBounds);
I'm currently learning to use google maps and am following the following to set a max bound for my map: Google Maps v3 - limit viewable area and zoom level
My bounds are set as:
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.600, -87.857),
new google.maps.LatLng(42.065, -87.310)
)
Within my dragend event listener, I console.log(strictBounds) and am getting the following:
It is returning my south-west Latitude and north-east Latitude together as one LatLng and my south-west Longitude and north-east Longitude as one LatLng.
I could sorta hack it and set south-west and north-east coordinates so that the return would be what I want it to be, but I was wondering why this is happening in this scenario and would I be running into this problem further with other google map methods?
EDIT:
Just to clarify, my two LatLng positions set in strictBounds should be my southWest and northEast positions for the max bounds of the map.
When I use the addListener method provided in the link above (Google Maps v3 - limit viewable area and zoom level), it grabs the wrong lat/long from strictBounds.
Instead of grabbing:
(41.6, -87.857), (42.065, -87.310)
It grabs:
(41.6, 42.065), (-87.31, -87.856999..)
The way you define the bound is correct. Just don't use console.log(strictBounds). Use the following instead
var sw = strictBounds.getSouthWest();
var ne = strictBounds.getNorthEast();
console.log(sw.lat() + "," + sw.lng());
console.log(ne.lat() + "," + ne.lng());
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);