Set zoom level of google map based on different lat and long - javascript

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);

Related

Google Maps API setBounds to exact coordinates

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.

Finding center and zoom level in leaflet, given a list of lat-long pairs

I have a list of lat long pairs. (Or I could create GeoJSON). I want to map them all on leaflet map.
How do I find what should I set as the center and as the zoom level so that all the points show up.
All the leaflet examples seem to use a fixed center and zoom, but I am accepting user input so I need to calculate them.
The easiest way is with a LatLngBounds object. You can then have the map fitBounds. Or get its center manually if you prefer.
var myPoints = [[1,1],[2,2] /*, ...*/ ];
var myBounds = new L.LatLngBounds(myPoints);
myMap.fitBounds(myBounds); //Centers and zooms the map around the bounds
You can even forgo instantiating the bounds object if you would like:
myMap.fitBounds([[1,1],[2,2] /*, ...*/ ]);
I'd recommend to use GeoJSON and create your leaflet map as described in the tutorial. Than you can simply use geojsonLayer.getBounds() together with map.setBounds() to zoom to your data.

Algorithm Mid Point between different GPoint

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);

Openlayer Projection

I want to zoom to a particular house in the google mapS, but when I provide its bounds and lattitude and longitude, it does not show images as well as the particular house. Can anyone provide the solution for this?
Solution would be probably to transporm coordinates first. Unfortunately when You pass coordinates to OpanLayers.LonLat(lon,lat) it is supposed to be WGS:84, while OpenLayer.Bounds() needs coordinates given in EPSG:900913.
You should then use Proj4js.transform and pass transformed coordintes in EPSG:900913
You can transform it like this one:
var map = new OpenLayers.Map('map');
var location.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:900913"));

Google Maps centering or marker positioning issue

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.

Categories

Resources