Develop Reference

Custom overlay in google maps area clicked then zoom in

So I tried to draw grid line on my map and I found a good example on google api documentation here : https://developers.google.com/maps/documentation/javascript/examples/maptype-base
it works , now I have another problem in every area or rectangle which built by grid line, I want them to have a listener on click event and then zoom to area that has been clicked. I have tried like this
google.maps.event.addListener(map, "click", function (e) {
var latLng = e.latLng;
map.setCenter(new google.maps.LatLng(latLng.lat(), latLng.lng()));
map.setZoom(17);
});
it works either, but as you can see the latitude and longitude are the exact location where the cursor / pointer clicked, it's not in the middle of the rectangle or area it means the map after zoomed in is wrong. Could anyone help me with this?

I think the problem is because you are using the overlay(as your grid line), when using the tile overlay Google Maps API breaks up the imagery at each zoom level into a set of square map tiles arranged in a grid. When a map moves to a new location, or to a new zoom level, the Maps API determines which tiles are needed and translates that information into a set of tiles to retrieve.
For example each zoom level increases the magnification by a factor of two. So, at zoom level 1 the map will be rendered as a 2x2 grid of tiles. At zoom level 2, it's a 4x4 grid. At zoom level 3, it's an 8x8 grid, and so on.
So when you zoom in, the coordinates that you click is not always in the middle because tile overlay is not set because of your coordinate.
Check this page for more information about overlay.
You can also check this SO question for more information.

google map with multiple routes - auto zoom and center map

I have managed to modify a script I found to suite my needs.
my only current issue is that I have to set the center of the map manually in the code and the zoom level.
how can I modify this so the api automatically selects the correct zoom level and center point for the map.
fiddle is here
I need to remove this manual code:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-30.559, 22.937),
zoom: 4
}),
and configure it to zoom and center automatically based on the routes given (routes array)
you will see in the fiddle that the costa rica route is off the map so zoom needs to go out. if it was a short trip then zoom in to fit all contents into the map
Thanks as always:

You cannot get rid of that code. Option center and zoom are the only required parameters of google.maps.MapOptions object. See docs of MapOptions.
You can get rid of option preserveViewport or set it to false instead of true so your map will be centered and properly zoomed.

move google map to the left on marker click

When I click on a marker I don't want to center the map on the marker but move it to a bit to the left so I can display a window with some information on the right. I think it would be easier to use setCenter() but then I need a position next to the marker.
I guess i would have to do some calculations based on the markers latitude and longitude but I do not know how to proceed with this. Does anyone know how to calculate to a position based on a markers latitude and longitude? or is there another (easier) way?

Add an event listener to the marker.
Once marker is clicked, get marker position using getPosition(). To move the map to the left you want to center the map to a point to the right of the marker. So make a new set of coordinates with same lat and lng + 1 degree maybe.
Then you can use setCenter() or panTo() methods to move to the map in your desired direction.

Maintain center of google map when I change the size of the map

I'm trying to change the size of a map and maintain the center. It doesn't work thoug. Code
var center = map.getCenter()
$('#left').css("width", "360px");
map.setCenter(center)

Have a look at the accepted answer in this question: How to offset the center point in Google maps api V3
What you need to do is work out how far the centre-point of the map will need to be moved so it's where it was before the re-size, and then call my new offsetCenter function to put it back there.
For example: resizing a map so that the left edge moves 300px to the left will require your centre-point to appear 150px to the right of the real centre.
var center = map.getCenter();
$('#left').css("width", "360px");
google.maps.event.trigger(map, 'resize');
offsetCenter(center,150,0);

setCenter() and then move marker vertically higher on the map canvas

I have a simple question, and hopefully there is a simple answer . . . I just can't find it after a couple of hours of searching.
I've got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.
Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?
Thanks,
Chuck

There may be many ways, e.g.
google.maps.event.addListener(marker, 'click', function() {
this.getMap().setCenter(this.getPosition());
this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
});
It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)

You could also muck around with getProjection() and the fromContainerPixelToLatLon and fromLatLonToContainerPixel to set a specific position within the viewable point of the math.
Both of those will give you pixel measurements from the <div> element you're using as the map canvas.
c.f. fromDivPixel and ToDivPixel which will give you the pixel position of the item on the infinite div of the map. Say you've got your map focussed on Africa, right? And you've got a pin in NYC. Using the *DivPixel* variants will keep your pin in NYC, and then you can pan towards it. Using *ContainerPixel* will move your pin into view on the map regardless of whatever Lat/Lon you've set it to.