Is there a simple way to scroll a google map programmatically of x pixels?
I can only think of using setCenter, but the problem is that I would have to compute the new location (lat/lng) depending on the zoom level...
Can you think of something else? Telling me that it's not possible with the Google Map API is a valid answer if you're pretty sure about it.
ps: I'm using Gmaps4rails, so if you can think of a way to do that with the gem, it'd be cool. (like adjusting the bounds to a subset of the map.)
Because in the end my goal is to prevent the menu from hidding some markers. I would need to change the viewport of the map, if that makes sense, so that it fits the markers into the orange area, not the full map.
Solution:
#Shane Best, great, the idea works perfectly, but I think your solution was for Google API v2, right? Here's how I did it for V3:
var point = map.getCenter();
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var projection = overlay.getProjection();
var pixelpoint = projection.fromLatLngToDivPixel(point);
pixelpoint.x += my_value; # or .y
point = projection.fromDivPixelToLatLng(pixelpoint);
map.setCenter(point);
If anybody knows about a better solution with API v3, tell us about it.
Take a look at the projection object:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection
First you would need to get the center of the map.
var point = map.getCenter();
Convert the latlng to a point value.
var pixelpoint = projection.fromLatLngToPoint(point);
Add yourvalue to the point values.
pixelpoint.x = pixelpoint.x + yourvalue;
//or
pixelpoint.y = pixelpoint.y + yourvalue;
Convert it back to a latLng.
var newpoint = projection.fromPointToLatLng(pixelpoint);
Set the new center with the new value.
map.setCenter(newpoint);
I haven't tested the above but it should work.
I believe you are looking for this:
var panListener = google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
map.panBy(0,-90);
});
setTimeout(function() {
google.maps.event.removeListener(panListener)
}, 2000);
In this case, it moves the map south by 90px.
Related
Is there a way to get the bounding rectangle (screen position) of Google Map API markers? I am using an Angular 2 wrapper, so I don't construct the markers like you would normally with the API (mostly irrelevant here though).
Or are they on an internal canvas with no way to pull position like you would with an html element?
I have tried something like this, but getBoundingRectangle() comes back with zero values:
var googleMapContent = document.getElementsByClassName("sebm-google-map-content")[0];
var markerList = googleMapContent.getElementsByTagName("sebm-google-map-marker");
if( markerList.length > 0 ) {
for (var i = 0; i < markerList.length; i++ ){
var marker = markerList[i];
var markerLabel = marker.getAttribute("ng-reflect-label");
var boundingRectangle = marker.getBoundingClientRect();
}
}
P.S. I have access to map center lat/lng + zoom and marker lat/lng, so I can "math" this, but that's pretty dirty.
The Marker class hasn't got either a getBoundingRectangle or
getBoundingClientRect method.
It has got getPosition() and getShape() though, which in combination might give you the information you need.
I have a dynamic tile set where I do NOT want to allow panning outside of its bounds.
The below code gets me close, but the user can still scroll horizontally outside of strict bounds because it uses the map center for comparison
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(sw_lat, sw_lon),
new google.maps.LatLng(ne_lat, ne_lon)
);
google.maps.event.addListener(map, 'drag', function()
{
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
For quick access, here is the jsfiddle for this solution: http://jsfiddle.net/nYz6k/
Supposed you're happy with the current solution of detecting bounds against the center, all you have to do is to restrict the bounds based on the current map canvas size.
The result that you're getting now is that every corner of the restricting bounds appears on the center of the map when it's full restricting (i.e. both latitude and longitude exceed the bounds corners).
The solution is to actually remove the x and y offset from the bounds, and still be able to check against the center (which is the most efficient solution, compared to other bounds-based checking solutions).
Also, you have to restrict the bounds only when you initialize the map and when the window is resizing, which means that when you pan there is no extra processing overhead besides the check method that you have already provided.
Don't forget to set the maxZoom property for the map (tweak it as needed) because above a determined zoom level the restricting bounds will by themselves fit in the viewport and there's no solution for that.
Important! Use 'center_changed' instead of 'drag' because 'drag' has that sliding behavior that when you finished dragging and set the center, the maps still slides in the direction of the panning.
Before you implement the solution I recommend you to check out how the Maps API coordinate system and projection works, because this solution is heavily based on it, and if you want to tweak it out, it's useful to know this information.
https://developers.google.com/maps/documentation/javascript/maptypes and check out the Custom Map Types -> Map Coordinates section.
Here's what you need to do. First, you need to implement 2 short methods of converting between geographic coordinates (LatLng) and pixel coordinates.
var fromLatLngToPixel = function (latLng) {
var point = map.getProjection().fromLatLngToPoint(latLng);
var zoom = map.getZoom();
return new google.maps.Point(
Math.floor(point.x * Math.pow(2, zoom)),
Math.floor(point.y * Math.pow(2, zoom))
);
}
var fromPixelToLatLng = function (pixel) {
var zoom = map.getZoom();
var point = new google.maps.Point(
pixel.x / Math.pow(2, zoom),
pixel.y / Math.pow(2, zoom)
);
return map.getProjection().fromPointToLatLng(point);
}
Next, implement the method that effectively restricts the bounds. Note that you always have to keep a variable that stores the original bounds, because each time the map canvas is resized, the resulting bounds will change.
For this, let's say originalBounds keeps the bounds you provided with sw_lat, sw_long etc, and shrinkedBounds is modified by this method. You can rename it to strictBounds to still work in your method, but it's up to you. This uses jQuery for getting the width and height of the canvas object.
var shrinkBounds = function () {
zoom = map.getZoom();
// The x and y offset will always be half the current map canvas
// width and height respectively
xoffset = $('#map_canvas').width() / 2;
yoffset = $('#map_canvas').height() / 2;
// Convert the bounds extremities to global pixel coordinates
var pixswOriginal = fromLatLngToPixel(originalBounds.getSouthWest());
var pixneOriginal = fromLatLngToPixel(originalBounds.getNorthEast());
// Shrink the original bounds with the x and y offset
var pixswShrinked = new google.maps.Point(pixswOriginal.x + xoffset, pixswOriginal.y - yoffset);
var pixneShrinked = new google.maps.Point(pixneOriginal.x - xoffset, pixneOriginal.y + yoffset);
// Rebuild the shrinkedBounds object with the modified
shrinkedBounds = new google.maps.LatLngBounds(
fromPixelToLatLng(pixswShrinked),
fromPixelToLatLng(pixneShrinked));
}
Next, all you have to do is to call this method:
once when the map is initialized. Be aware that depending on when you call the method, you may be getting some weird errors because the map might not have yet initialized all it's properties. Best way is to use the projection_changed event.
google.maps.event.addListener(map, 'projection_changed', function (e) {
shrinkBounds();
});
every time the map canvas is resized
google.maps.event.addListener(map, 'resize', function (e) {
shrinkBounds();
});
But the most important part of this is that the 'resize' event is never triggered for programmatic resizes of the map container, so you have to trigger it manually every time you resize the canvas programmatically (if you do, but I doubt you do).
The most common way is to trigger it when the window is resized:
$(window).resize(function () {
google.maps.event.trigger(map, 'resize');
});
After all of this, you can now safely use your method, but as a handler for 'center_changed' and not for 'drag' as I've mentioned earlier.
I set up a jsfiddle with the full working code.
http://jsfiddle.net/nYz6k/
You can see the restricting at the bottom left corner with that little half-marker that shows up, which is positioned in the SW corner of the bounds. There is also one at the NW corner but naturally you can't see it because it's displayed above the position.
Instead of using map.getCenter() as a check, use map.getBounds()
Untested, but a simple way to accomplish this would be to check if the union of both bounds were identical (if not, your map bounds is outside your strict bounds):
var union = strictBounds.union(map.getBounds());
if (strictBounds.equals(union)) { //new map bounds is within strict bounds
Tiborg version above is the best version so far in keeping the bounds...
I noticed a bug that occurs when zoom level and width/height are larger than original bounds
I have modified his code and added a rectangle to see it in action.
var buildBounds = function(sw, ne) {
var swY = sw.lat();
var swX = sw.lng();
var neY = ne.lat();
var neX = ne.lng();
if (swY > neY) {
var cY = (swY + neY) / 2;
swY = cY;
neY = cY;
}
if (swX > neX) {
var cX = (swX + neX) / 2;
swX = cX;
neX = cX;
}
return new google.maps.LatLngBounds(
new google.maps.LatLng(swY, swX),
new google.maps.LatLng(neY, neX));
}
http://jsfiddle.net/p4wgjs6s/
I have a large (300*500px) custom control on the left side of my google map. I'm clustering my markers together. When a user clicks on a marker, I want to zoom the map in to show the markers in that cluster.
The problem is:
When I get the bounds of my marker collection, then map.fitBounds(collection_bounds), I end up with markers underneath my large control. Is there a way to prevent fitBounds from using the whole view port?
I have tried getting the LatLng of my south west bounds point, converting that to pixels, moving that 300px in, then converting that back to a LatLng to use as the new south west bounds point. This doesn't work though because the calculations are done before the zoom, so the 300px shift ends up being too much... I thought about writing my own fitBounds, but I hit the same issue, in that it's done before the zoom.
What you said works:
I have tried getting the LatLng of my south west bounds point,
converting that to pixels, moving that 300px in, then converting that
back to a LatLng to use as the new south west bounds point.
if you do it in two steps, which is pretty much transparent to the user because it is executed so fast that you hardly notice it. So, first you do a normal map.fitBounds(bounds); where bounds is only defined by your markers, and then you re-adjust with the technique you described. So:
google.maps.event.addListenerOnce(map,'bounds_changed',function(){
// re-adjust bounds here as you described.
// This event fires only once and then the handler removes itself.
});
map.fitBounds(bounds);
I had a 400pixel wide panel on the right hand size.
Starting from a call to zoomWithPoints passing two points to include in view, the following code implements the approach others have described: 1) Zoom to bounds 2) Using the resulting zoom level calculate how much to add onto the 'maxLon' 3) Zoom to bounds again.
function zoomToBbox(minLat, minLon, maxLat, maxLon) {
var southwest = new google.maps.LatLng(minLat, minLon);
var northeast = new google.maps.LatLng(maxLat, maxLon);
var bounds = new google.maps.LatLngBounds(southwest, northeast);
map.fitBounds(bounds);
}
function zoomWithPoints(lat1, lon1, lat2, lon2) {
var maxLat = Math.max(lat1, lat2);
var maxLon = Math.max(lon1, lon2);
var minLat = Math.min(lat1, lat2);
var minLon = Math.min(lon1, lon2);
zoomToBbox(minLat, minLon, maxLat, maxLon);
var z = map.getZoom(); //get the zoom level after zooming
// Add a bit to maxLon, to result in it panning left by 400 pixels
var widthOfPanel = 400;
var degreesPerTile = 360 / (Math.pow(2,z));
var degreesPerPx = degreesPerTile / 256;
var degreesForPanel = degreesPerPx * widthOfPanel;
maxLon = maxLon + degreesForPanel;
//zoom (pan across a bit) to take account of the added bit
zoomToBbox(minLat, minLon, maxLat, maxLon);
map.setZoom(z); //put it back to right zoom level if necessary
}
...call zoomWithPoints
When overlay is a Google maps overlay and offsetx, offsety is the pixel distance from the maps center that I want to pan latlong to, the following works.
var projection = overlay.getProjection();
var pxlocation = projection.fromLatLngToContainerPixel(latlong);
map.panTo(projection.fromContainerPixelToLatLng(new google.maps.Point(pxlocation.x+offsetx,pxlocation.y+offsety)));
However, I don't always have an overlay on the map and map.getProjection() returns a projection, not a MapCanvasProjection which does not have the methods I need.
Is there a way to do this without making an overlay specificaly for it?
Since nobody has come up with a better way, here's my solution. Make an overlay with the sole job of giving me a MapCanvasProjection object.
var helper = new google.maps.OverlayView();
helper.setMap(map);
helper.draw = function () {
if (!this.ready) {
this.ready = true;
google.maps.event.trigger(this, 'ready');
}
};
var projection = helper.getProjection();
...
Hope this helps someone. Better suggestions welcome.
I am working with google map. According to requirements i need to set different zoom level that is dependent to my search query.If there are multiple location on the map in country then map should focus the country. Other scenario is , if there are different locations marked in a city then map should be focused to city level.
var geoCoder = new GClientGeocoder();
geoCoder.setViewport(map.getBounds());
geoCoder.getLocations('searchquery', function(latlng) {
if( latlng.Placemark.length > 0 ) {
var box = latlng.Placemark[0].ExtendedData.LatLonBox;
var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
var zoom = oMap.getBoundsZoomLevel(bounds);
map.setCenter(center, zoom);
}
});
I think the key part of this for you is
//box is a LatLonBox with the size of your resultquery. You can create this yourself as well
var box = latlng.Placemark[0].ExtendedData.LatLonBox;
//bounds are the bounds of the box
var bounds = new GLatLngBounds(new GLatLng(box.south, box.west), new GLatLng(box.north, box.east));
//center is the center of the box, you want this as the center of your screen
var center = new GLatLng(box.Placemark[0].Point.coordinates[1], latlng.Placemark[0].Point.coordinates[0]);
//zoom is the zoomlevel you need for all this
var zoom = oMap.getBoundsZoomLevel(bounds);
//the actual action
map.setCenter(center, zoom);
After you perform the search, once you have the locations, you can use bounds.extend and map.fitBounds so the map automatically zooms to show all the pins returned by your search, like this:
//places is an array that contains the search result
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
//pass the location of each place to bounds.extend
bounds.extend(place.geometry.location);
}
//tell your map to sets the viewport to contain all the places.
map.fitBounds(bounds);
On the other hand, if you do a search for a zone like zip code, city or country using the geo coder, you can also use map.fitBounds to set the viewport to show the entire specific zone that was returned by the geo coder, like this:
//response is the geocoder's response
map.fitBounds(response[0].geometry.viewport);
Here's a codepen with the geocoder example https://codepen.io/jaireina/pen/gLjEqY
I found following article very helpful. using code sample code I can able to achieveenter link description here this.
I tried the code in drupal and it is working.