LatLng at pixel location?

[pinksy]

Hi

I'm really sorry if this has been answered - I can't find a clear answer, and am struggling to figure it out from the documentation...

I have a map with known dimensions, and one side of the map will be obscured by a DIV which will have a variable width, leaving a visible portion of the map on the left. What I'm trying to figure out is the LatLng at the center of the visible portion.

I can easily work out the pixel co-ordinates of the center point of the visible area (as shown below), but I can't get my head around how to translate that into a LatLng.

Can anyone give me some pointers?

Thanks in advance.

[Barry Hunter]

Just use the fromDivPixelToLatLng() function :)

(passing in the pixel coordinates you have calculated as per the image)

I know I strugged, to find a good example, of its use, from one of my sites... 

var overlay = null;

function update_map() {

	if (overlay == null) {
		overlay = new google.maps.OverlayView(); 
		overlay.draw = function() {}; 
		overlay.setMap(map); 
	}
	var center = map.getCenter();

	if (prevCenter && map.getZoom() == prevZoom) {
		var point1 = overlay.getProjection().fromLatLngToContainerPixel(center);
...

shows one way to get a MapCanvasProjection object. 

(you could possibly store the projection in a variable, rather than calling overlay.getProjection() each time)

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/jzlxFB2Vjf0J.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Jeremy Geerdes]

If the variable-width div is always going to be visible, why not adjust the width of your map to be the 200px - Zpx?

Jeremy R. Geerdes

Generally Cool Guy

Des Moines, IA

For more information or a project quote:

jrge...@gmail.com

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!

[pinksy]

Thanks for the reply Jeremy. I don't want to resize the map when the variable-width DIV is resized, because (as far as I know) to resize a map's canvas means completely reloading it (i.e., instantiating a new google.maps.Map object, passing in the resized DIV). For my purposes, the dimensions of the actual map must remain the same. The variable-width DIV is actually a menu bar that the user can resize as they please (using jQuery), without having to re-load the map.

[pinksy]

Thanks for the reply Barry. I'm not quite sure I completely understand - do you mean something like this (which doesn't appear to work)?:

overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 

var x = (200 - divwidth) / 2;

var y = 50;

var latLng = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(x,y));

If I place a marker at that latlng, it doesn't seem to work.

Is there some kind of 'wait' needed before the overlay can be used? And am I usiing google.maps.Point in the right way?

Thanks again

[Barry Hunter]

I think its time for a link.

We dont know what context you are calling that. Is the Map definitly
existing when that code is called?

All be weary of calling that many times in a row. If you create the
overlay each time, you going to end up with lots of invisible overlays
added to the map - eventually slowing performance.

Your calling of google.maps.Point looks ok at first glance

On Fri, Oct 28, 2011 at 7:23 PM, pinksy <pink...@gmail.com> wrote:
> Thanks for the reply Barry. I'm not quite sure I completely understand - do
> you mean something like this (which doesn't appear to work)?:
>

> overlay = new google.maps.OverlayView();
> overlay.draw = function() {};
> overlay.setMap(map);
>

> var x = (200 - divwidth) / 2;
>
> var y = 50;
>
> var latLng = overlay.getProjection().fromDivPixelToLatLng(new
> google.maps.Point(x,y));
>
> If I place a marker at that latlng, it doesn't seem to work.
>
> Is there some kind of 'wait' needed before the overlay can be used? And am I
> usiing google.maps.Point in the right way?
>
> Thanks again
>

> --
> You received this message because you are subscribed to the Google Groups
> "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-maps-js-api-v3/-/BipylqUZNbsJ.

[pinksy]

Here is a simplified example of the question: http://www.pinksy.co.uk/newsquare/overlaytest.html

The map is 600px wide, 300px high. An overlay is created as suggested above. A click event is added. On click, it adds a marker at the LatLng at 300px,150px (i.e., what I expect to be the center of the map), using the code: 

var pixelLatLang = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(300,150));

var marker = new google.maps.Marker({

   position: pixelLatLng,

   map: map

});

The first time you click, it puts the marker at 300px,150px. But if you pan the map about a bit and click again, it doesn't put the marker at 300px,150px anymore. Why not?

Thanks again for your help!

[pinksy]

After a bit of experimentation, it turns out that fromContainerPixelToLatLng() is actually what I'm after. I.e., 

var pixelLatLang = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(300,150));

var marker = new google.maps.Marker({

   position: pixelLatLng,

   map: map

});

I've posted an example at http://www.pinksy.co.uk/newsquare/overlaytest2.html (using point 200px/200px as the example instead). The marker is added at 200px/200px wherever you drag the map.

Cheers