Google Maps v3 - limit viewable area and zoom level
Problem was solved at above link. But I don't use google.maps.Map in my project.
var map = new google.maps.Map(document.getElementById("map_canvas"));
I used GMap2.
var map = new GMap2(document.getElementById("map_canvas"));
But this version not working. Any help?
The first place to look at for implementation help on the Google Maps API v2 should always be Mike William's v2 tutorial.
This page Part 7 Restricting the range of map zooms and pans. should apply.
Remember that v2 is deprecated and will potentially stop working 5/19/2013.
Related
With the Google Maps JS API new renderer, as of v3.32, infowindows placement seems wrong. They are not panned outside of map controls areas. The best example is directly from Google Maps Platform docs. If you go here and click on the marker you'll see what I'm talking about: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
See bottom of question for printscreen.
I searched a lot for some information on this change of behavior, if that's by design now, in case we'd have to handle this in code, but can't seem to find anything regarding this. What would be the API way to deal with this ?
Looks like it's partly been fixed in the weekly channel (current = 3.34). So you can load your map with https://maps.googleapis.com/maps/api/js?v=3.34&key=...
and the infowindow should move out of the map control's areas. It seems though it will not pan out of custom controls areas, which it used to do before the new renderer.
I'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.
Here is my function which handles this:
var fitMapToShowResult = function(index){
var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
var firstResultLatLng = new google.maps.LatLng(
$scope.searchResults[index].geometry.location.k,
$scope.searchResults[0].geometry.location.B
);
var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
for (var i=0;i<latlngList.length;i++){
latlngbounds.extend(latlngList[i]);
console.log('latlngbounds',latlngbounds);
}
//$scope.map.setCenter(latlngbounds.getCenter());
$scope.map.fitBounds(latlngbounds);
};
It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?
It may be relevant that my map uses custom markers.
To assist with debugging, I added this code to draw the bounds on the map...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first couple results:
But often it's incorrect:
Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.
Roundup of similar questions
I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.
google maps V3 fitBounds not accurate
Useless question with no code and no answers
Google Maps API v3 - fitBounds centers only one marker
User was re-defining the inside a loop without realizing it.
Using setZoom() after using fitBounds() with Google Maps API V3 &
Google Maps API V3 fitbounds() zooms out but never in &
Google Maps with fitBounds don't zoom
fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.
google maps → fitBounds manually
User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)
google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds()
Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())
Trying to get Google Maps fitbounds to work
Super noob did not realize javascript methods were case sensitive
Google maps V3 custom marker images and fitBounds()
fitBounds() works as expected but user needed to allow more space for bug custom markers
Google Maps V3 fitBounds on visible markers
Simple question about how to use fitBounds()... rtfm
Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean
No answers at time of writing. Sounds like invalid lat/lng pairs.
Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.
MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.
Does anyone know how to change the boundaries of a map with the google maps api? I have a map currently that shows the full world and if I zoom out it shows multiple copies of the full world. The problem is that I only want to show north america, and I only want to show it once. Can anybody help out? Thanks!
Duplicate: Google Maps API V3: limit map bounds
There's no API to restrict map boundary in Google Maps API. You may can accept external solution, or consider using other map library like OpenLayers or Leaflet, which supports max-extent feature.
I am migrating to Google maps V3 from V2. I need to add a G_MAP_MARKER_MOUSE_TARGET_PANE pane in the maps. following is the V2 code:
mapPanel = myMap.GMap.getPane(G_MAP_MARKER_MOUSE_TARGET_PANE);
AddItem(mapPanel);
I need the V3 code to get the MOUSE_TARGET_PANE. Can anyone help me?
I think you're looking for google.maps.MapPanes.overlayMouseTarget.
Here's a list of all the V3 Maps API overlay panes.
Naturally, the V3 overlays work a bit differently from the V2 ones. Here's a V3 example.
I use Google Maps v3 in my application and I noticed a strange behavior, When I refresh the web page, the map zoomed out to display the whole map then get back to the zoom level I specify in my code. This happen fast but every time I refresh the page. How can I fix it?
We once had this problem in our app but I just checked and it isn't happening any more. I can't remember what I did to fix it but here are some things to consider or try:
Set the maxExtent of your map to be the same as your base (Google) layer.
When we set up our google layer we set spherical mercator to true.
Check that your map's projection is "EPSG:900913", but this may have no effect.
// get max extent from base layer and set in map
map.maxExtent = map.getMaxExtent();
// create a Google layer
layer.params.sphericalMercator = true;
layer.params.maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var googleLayer = new OpenLayers.Layer.GoogleWfdss(layer.id, layer.params);
These might seem obvious but I thought I'd give you some other directions for debugging if you hadn't considered them.