How to Call Fromlatlngtodivpixel in Google Maps API V3

How to call fromLatLngToDivPixel in Google Maps API V3?

Look at http://qfox.nl/notes/116

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var point = overlay.getProjection().fromLatLngToDivPixel(latLng); 

Ugly indeed. Much easier in v2 - another flaw of google api v3!

Google Maps API V3 fromDivPixelToLatLng not consistent

After experimentation, I have found that fromContainerPixelToLatLng() is what I'm looking for. For the benefit of others, I have posted an example at http://www.pinksy.co.uk/newsquare/overlaytest2.html.

(For the record, I'm still unsure why fromDivPixelToLatLng behaves the way it does, but never mind!)

How to offset the center of a Google maps (API v3) in pixels?

Found this question when researching and thought I should provide an answer:

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

If your Google maps variable isn't map use the following call function reference:

function map_recenter(map,latlng,offsetx,offsety) { ...

Google Maps API v3 -- How to convert .getBounds() to to pixel coordinates?

However, .getBounds() returns a pair of LatLng coordinates. I've tried
accessing it like it's an array (as in specifying index1 for
example) but that does not work. It doesn't seem to be an array.

LatLngBounds is not an array, it's an object and the documentation shows you two methods to get the coordinates:

var NE = bounds.getNorthEast();
var SW = bounds.getSouthWest();

Those two methods return LatLng objects which you can pass to fromLatLngToDivPixel()
However, if you got your LatLngBounds object by reading map.getBounds() then you already know what the pixel values should be, (the corners of your map container DIV).

Pixel distance in Google Map (API V3) to avoid overlapping labels / overlays

First I found that what I am looking for is subject of the clustering libraries / examples:

1. http://www.appelsiini.net/2008/11/introduction-to-marker-clustering-with-google-maps
2. http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html

The examples showed me a method google.maps.MapCanvasProjection.fromLatLngToDivPixel, which required a projection of the map. Eventually the following topics revealed how to get this projection:

1. Pan point on Google Map to specific pixel position on screen (API v3)
2. How to call fromLatLngToDivPixel in Google Maps API V3?

Google Maps API V3: Offset panTo() by x pixels

Here's a simpler version of Ashley's solution:

google.maps.Map.prototype.panToWithOffset = function(latlng, offsetX, offsetY) {
    var map = this;
    var ov = new google.maps.OverlayView();
    ov.onAdd = function() {
        var proj = this.getProjection();
        var aPoint = proj.fromLatLngToContainerPixel(latlng);
        aPoint.x = aPoint.x+offsetX;
        aPoint.y = aPoint.y+offsetY;
        map.panTo(proj.fromContainerPixelToLatLng(aPoint));
    }; 
    ov.draw = function() {}; 
    ov.setMap(this); 
};

You can then use it like this:

var latlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlng
});

setTimeout(function() { map.panToWithOffset(latlng, 0, 150); }, 1000);

Here is a working example.

Let me explain in detail. This extends the Map object itself. So you can use it just like panTo() with extra parameters for offsets. This uses the fromLatLngToContainerPixel() and fromContainerPixelToLatLng() methods of the MapCanvasProjecton class. This object has no contructor and has to be gotten from the getProjection() method of the OverlayView class; the OverlayView class is used for the creation of custom overlays by implementing its interface, but here we just use it directly. Because getProjection() is only available after onAdd() has been called. The draw() method is called after onAdd() and is defined for our instance of OverlayView to be a function that does nothing. Not doing so will otherwise cause an error.

---

Related Topics