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);
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);
In the Google Maps API it allows you to set the bounds of a map given a list of coordinates. That's awesome. My issue is that it gives a little bit of breathing room on the sides. I'm trying to get the bounding box I'm looking at to be barely containing the bounds.
For example, I want to view California so I set the bounds to be the Northeast and Southwest corners. Instead of showing just California though, I get all of Oregon and half of Mexico.
Here's what I'm currently doing:
var geo_region = {
northeast: {
lat: 42.0095169
lng: -114.131211
}
southwest: {
lat: 32.528832
lng: -124.482003
}
}
var map_bounds = new google.maps.LatLngBounds();
map_bounds.extend(new google.maps.LatLng(geo_region.northeast.lat, geo_region.northeast.lng));
map_bounds.extend(new google.maps.LatLng(geo_region.southwest.lat, geo_region.southwest.lng));
var plot_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
plot_map.fitBounds(map_bounds);
EDIT:
A clearer example might be Wyoming since it's such a nice rectangle. If my map dimensions are the same ratio as Wyoming, I only want it to show me Wyoming.
EDIT:
Somebody suggested that I offset the bounds manually so I grabbed some data on the offsets that Google is using but I can't figure out what their formula is for deciding those offsets so I'm a long ways away from being able to do that. I even used the viewport coordinates from Google's Geocoding API but those didn't help much either.
Here's my data: https://docs.google.com/a/dovidev.com/spreadsheets/d/1HZLdDt5uiGwEtY0NbX0pfkmYVuUDndptm_-kzq0vh_w/edit?usp=sharing
This cannot be done EXACTLY because of the way google's zoom level's work. Google sets the bounds of the area but zooms in as closely as possible without cutting anything out. Because the zoom levels are incremental and their increments are so large, this often means that you'll end up with a lot of extra space.
When I tried to zoom in even once from what I thought was grossly oversized, I found that parts of the bounds had been cut off.
And thus we see that Google is already getting it as tight as it can be.
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.