We have a report that shows where 2 markers are on a map, works great except when the markers are next to each other it zooms in to the highest level of zoom.
We want the min zoom to be open, but set the max zoom to a certain level. I have looked through the Google Static Map documentation, and cant see where to do it.
Does anyone know if this is possible using the static map api?
Cheers.
Google does not have that feature in place. Here is a feature request:
Issue 3909
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3909
Please vote!
Well it is sort of not straight forward to get it with static maps. You can omit specifying the zoom and hope google will choose what it thinks best.
Anyway this is how I got rid of it. I had my own zoom up / zoom down buttons to show up next to the map image. Upon click, I increase or decrease the current zoom value and reload the map image.
I know it's not pretty, but it gets the job done.
I have not tried that for static maps but it works for me in normal map:
google.maps.event.addListener($map, 'zoom_changed', function(){
if($map.getZoom()<4){$map.setZoom(4);}
if($map.getZoom()>14){$map.setZoom(14);}
});
Here I am limiting both max and min zoom.
Hope it helps
K
http://maps.google.com/staticmap?markers=-21.7164,35.4384&size=640x640&key=your-api-key&format=png8&maptype=roadY&zoom=8
Note the zoom querystring parameter
I found the following code from this URL:
http://code.google.com/apis/maps/documentation/javascript/events.html
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
Instead of adding listener, you could do document.onload(function() {
map.setZoom(8));
Related
I have a map with a semi-transparent search bar on top of it. I have also got a bunch of markers with infowindow attached to them.
The problem is that google maps autopan feature obviously doesn't take my search bar into account, therefore if my marker is too close to the top, a part of the infowindow gets covered by the bar.
Is it possible to somehow specify the minimum distance the infowindow needs to be from the map's top?
I was also thinking of limiting the bounds of the map using markers' positions but in my case the markers can also end up under the search bar, so it is not an option.
Any ideas? Thank you for your time!
There exists a library called Snazzy Info Window that can be used instead of the usual InfoWindow. Then you can pass an option edgeOffset in pixels to this object and voila, problem solved. Hope this helps someone in the future!
i am using google maps in order to give some directions from one point to another.
Although, i have set the zoom of the map to 15 the zoom changes after the response of the direction request in order probably to fit the directions into the map.
Does anyone nows how to keep the zoom constant at 15. and focus at the first point?
Thanks in advance.
In your DirectionsRendererOptions, set this option:
preserveViewport: true
See: https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions
I am creating a map which returns the LatLng by pixel on screen, therefore I need a OverlayView implemented within the map. Unfortunately with the OverlayView, there is an issue after zoom in or out. When dragging the map after zoom, it does return me a new LatLng, but the screen is still showing the same location.
I am not sure how to fix it but the issue will gone once I pan the map with the pan control, then I could drag the map no matter the zoom level.
can anybody give me an advise?
Thanks,
Nick
To fix this issue, just call panTo function in the "zoom_changed" event.
google.maps.event.addListener(mymap, "zoom_changed", function() {
mymap.panTo(mymap.getCenter());
});
The map may not move smoothing because the panTo function is only called by zoom_change event unfortunately, so just call the panTo function after the map is initialized. Then the map could be moving around and different zoom level.
I have implemented a Google map by using the Google Maps Javascript API v3 Services. When the page loads, the map displays only in the top-left corner of its div container, that is, it displays only in one-forth of the div container, and the remainder is blank.
However, when I press F12 to inspect the code (with Firebug), suddenly the map will display completely.
What's going on here?
It happens often when you init the map and position of map's container changes.
Try to call after loading map and all messings up with DOM:
google.maps.event.trigger(map, 'resize');
You want to try the google ajax google loader. google.load("maps","2"). It's working for me because the loader makes the map work even when I'm switch fast between many other maps and do many travel-salesman-meta-heuristic on the map.
If hsz's solution doesn't work, it may be because the resize event needs to be triggered later. This code worked for me:
google.maps.event.addListenerOnce(map, 'idle', function () {
google.maps.event.trigger(map, 'resize');
});
Source: https://stackoverflow.com/a/17060345/12484 (credit: Ian Devlin)
When clicking from one marker to another in Google Maps, the map screen animates the move smoothly if both markers are within them initial map view but jumps if one of the markers is off screen.
I'm trying to set up a map which has several locations within the main map area but has one which is 'off screen'. I have a signpost icon to the more distant location within the initial map area which I want to smoothly scroll to the off screen location when clicked (so as to give a better sense of it's relative location). I can't find anything in the Maps API which would let me do this however.
I could zoom out, move and then zoom in again but this looks a bit jarring. Am I missing something in the API, or does anyone have any suggestions?
Unfortunately, I don't think this is possible (without a change from Google). From the v3 API reference for panTo:
Changes the center of the map to the given LatLng. If the change is less than both the width and height of the map, the transition will be smoothly animated.
which implies that if that change is not less than the dimensions of the map, the transition won't be smoothly animated. The other pan methods are similar.
You could try moving in multiple steps but that's a bit of a hack and I suspect the result will be poor.
Sorry that's not very helpful (I have the same problem).
For me this method works, but i'm using Google Maps API v2.
LatLng latLng = new LatLng(lat,lng);
map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, ZOOM_FACTOR));
This animates the camera from current position to the new one.
If you are using Gmaps API V2, then you can implement smooth animated move very easily by using panBy() method. You have to use fromLatLngToContainerPixel() method to find the amount of pixels to pan by.
Here is the bit of code:
var newLoc = map.fromLatLngToContainerPixel(new GLatLng(lat, lng));
map.panBy(new GSize( newLoc.x, newLoc.y ));
However, what I am trying to do is to achieve the same thing in maps API V3, but sadly fromLatLngToContainerPixel() method does not work anymore the way it did :(