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 square 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 square it means the map after zoomed in is wrong. Could anyone help me with this?