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 Streetview API Indoor panorama.setPosition() redirects to start position

I am working on a Google Streetview indoor application using the Google Maps JS API. I am using panorama pictures that are available on Google Streetview. I sometimes want to programatically change the position, for instance when somebody clicks on a position in a small map. However, when I call panorama.getPosition() I automatically get redirected to a different position. I can actually see the position_changed event being triggered twice.
I already sort of found the cause of this issue. It has something to do with the starting/entrance positions Google maps uses for Streetview Indoor.
The two orange circles depict the two possible starting/entrance points into the building. When dropping the pegman over these circles you will enter the building in Streetview Indoor.
It looks like when these starting points exist, the Google Maps API does not let you programatically set the position to some position other then any of the starting points. It will always redirect you to one of the starting points. This is obviously not what I want.
//The starting/entrance position is lat: 52.089988, lng: 5.178041
//The position I want to go to
var goToPosition = {lat: 52.0898852, lng: 5.1780344};
//Position changed EventListener
google.maps.event.addListener(panorama, 'position_changed', function() {
var newPosition = panorama.getPosition();
console.log('changed position to:', newPosition.lat(), newPosition.lng());
});
//Calling setPosition with goToPosition
panorama.setPosition(goToPosition);
//Will result in two console.logs directly printed after another:
changed position to: 52.0898852 5.1780344 //goToPosition
changed position to: 52.089988 5.178041 //starting position
The console.logs show that it looks like the position is being changed twice directly after each other, ending the position at the starting position.
I'm wondering if any body else has encountered this problem and if there is a known workaround for this. I am in contact with the photographer that uploaded the panorama pictures to Google. Maybe there's something in the way these pictures are uploaded to Google and configured. I wonder if this can even be fixed in my application code, or if it's an API problem or even expected behavior.
Thanks!

I found the solution for my problem, partly thanks to #LilDevil's answer.
Each panorama for a position has a panorama ID. If you know the panorama ID in advance, it can be used to move to that position using setPano().
I store panorama ID together with the lat,lng of a position. When clicking on the map I calculate the known position that is nearest to the clicked position. I can then look up the panorama ID that belongs to this position and use it to move to that panorama using setPano().
This doesn't seem to be a very clean way to solve the problem, because the panorama ID might change over time (for instance when new panorama pictures are uploaded to Google Streetview). However, I couldn't find anything in the documentation that says this method shouldn't be used. The documentation says that this method should be used when dealing with custom panorama pictures, which is not the case in my situation. Also, in this specific situation we are in control of when new panorama pictures will be uploaded (because it's for Google Indoor) so I can change the stored panorama ID's if that happens.

You can't just set the panorama to any coords. You need to use getPanorama() with your start coords and a radius, to find the coords to the nearest panorama, then set the pano to those coords. Some examples on https://developers.google.com/maps/documentation/javascript/streetview?hl=en

Leaflet responsive design - creating different zoom levels for different screen sizes using JavaScript

I am new to Leaflet - though started with a free MapBox map. I have created a Website with media queries.
I added a MapBox map to my index file with the following code:
<section id="map_section">
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'pandora.hn8og4ae', {
scrollWheelZoom: false,
minZoom: 5,
maxZoom: 18
}).setView([45, -67.874], 8);
</script>
</section>
On smaller screen sizes (mobile devices) I would like to have the map initiate at a different zoom level because I don't have enough screen size to show all of my markers at once. How would you do this in css? A helpful person at MapBox suggested the following:
You would need to do this programatically in JavaScript listening for a window resize event and setting map.setZoom(NUMBER) when a user's screen hits a particular size.
Would anyone mind walking me through how to do this?
I have taken baby steps into JavaScript and understand just enough to be dangerous. :) My organization is checking out Leaflet to produce a much larger project and this is an essential question for us. So even though I am using a MapBox example, we are moving directly to Leaflet.

You can listen for screen resize events with javascript like this
// listen for screen resize events
window.addEventListener('resize', function(event){
// get the width of the screen after the resize event
var width = document.documentElement.clientWidth;
// tablets are between 768 and 922 pixels wide
// phones are less than 768 pixels wide
if (width < 768) {
// set the zoom level to 10
map.setZoom(10);
} else {
// set the zoom level to 8
map.setZoom(8);
}
});
Alternatively, rather than listen for screen resizes, you may just want to get the screen width once, at the moment you create the map...

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.

How would I position a marker at the bottom of the map in Google Maps v2?

I have a webpage that finds a store by postcode or name.
I have just released an update to it so that contact details display in an info window coming from the marker. Due to the small size of the info window, after centering to the marker, the map pans down until it can fit the marker and info window in leaving the marker near the bottom.
Wondering if there is an easy way to set this offset immediately so that the marker appears at the bottom of the map window and it doesn't have to pan?
Thanks.

You could center the map appropriately before you add the marker:
var someZoom = 13;
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, someZoom);
The zoom is optional too. You can just leave the zoom on whatever it is:
map.setCenter(center);
If you would like to center on a particular pixel, instead of a lat/lng, then you can use this function to convert:
fromContainerPixelToLatLng(pixel:GPoint)
I feel like you should spend half an hour and review the docs: http://code.google.com/apis/maps/documentation/reference.html. I read the documentation extensively while working on my website: www.trailbehind.com

Perhaps the auto-panning is caused by an internal addoverlay event handler. Have you tried handling the addoverlay event and returning false from it?
GEvent.addListener(map, "addoverlay", function() {
return false;
});
where 'map' is the name of your GMap2 object.