Is there some simple way to get map.fromLatLngToDivPixel in API V3?

Question

Possible Duplicate:
How to call fromLatLngToDivPixel in Google Maps API V3?

aPoint=map.fromLatLngToDivPixel(labelA.getPoint());
bPoint=map.fromLatLngToDivPixel(labelB.getPoint());

I've tried the Overlay approach, but failed, as I need to get the variables back to the function:

function LabelLatLongSort(a,b)
{
    labelA = eval("label_"+a.deviceId);
    labelB = eval("label_"+b.deviceId);
    longOffset = eval("offsetOverlapWith_"+a.customId);
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);
    google.maps.event.addListenerOnce(map, 'idle', function() {
     aPoint=overlay.getProjection().fromLatLngToDivPixel(labelA.getPoint()); 
     bPoint=overlay.getProjection().fromLatLngToDivPixel(labelB.getPoint());
    });             
     diffLat = bPoint.y-aPoint.y;
     diffLong = aPoint.x-bPoint.x; 
    if (Math.abs(diffLong)>longOffset) return diffLong;
    if (diffLat==0)
    {
        return b.deviceId-a.deviceId;
    }
    return diffLat;
}

I've tried the above mentioned, but it doesn't work in my case. — Kokesh, Jan 11 '13 at 11:31
How did you try it? What do you mean by "it doesn't work in my case"? — geocodezip, Jan 11 '13 at 15:59

score 2 · Answer 1 · edited Nov 21 '20 at 14:46

The OverlayView approach is the way to do it. If it is not working then it could be because the map hasn't finished loading before you try to get the overlay projection.

Once you have created the map and the overlay, wait for the map idle event trigger and then attempt to use the overlay.

google.maps.event.addListenerOnce(map, 'idle', function() {
    aPoint=overlay.getProjection().fromLatLngToDivPixel(labelA.getPoint()); 
    bPoint=overlay.getProjection().fromLatLngToDivPixel(labelB.getPoint()); 
});

EDIT - Updated answer to reflect question changes

It's not a good idea to create the overlay and wait for the idle event every time you call the function. You should create the map and overlay once and continue the application once the map has loaded.

For Example

var map, overlay;

var labelLatLongSort = function(a, b) {
    labelA = eval("label_"+a.deviceId);
    labelB = eval("label_"+b.deviceId);
    longOffset = eval("offsetOverlapWith_"+a.customId);
    aPoint=overlay.getProjection().fromLatLngToDivPixel(labelA.getPoint()); 
    bPoint=overlay.getProjection().fromLatLngToDivPixel(labelB.getPoint());
    diffLat = bPoint.y-aPoint.y;
    diffLong = aPoint.x-bPoint.x; 
    if (Math.abs(diffLong)>longOffset) return diffLong;
    if (diffLat==0) {
        return b.deviceId-a.deviceId;
    }
    return diffLat;
}

var init = function(callback) {
    map = new google.maps.Map(div, options);
    overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        callback();
    });
}

var startApp = function() {
    var diffLat = labelLatLongSort(a, b);
}


// start application on DOM load
init(startApp);

What I did here was put my application code inside a function called startApp and pass this into the init function as a callback. Once the init function has loaded the map by waiting for the idle event, it calls the callback function.

Depending on your application you may need to change the setup slightly.

thank you, this seems to work. I am now having a problem with the way to figure out how to use the variables diffLat and diffLong, which need aPoint and bPoint. The problem is, that everything is in the function, which should return a value. — Kokesh, Jan 11 '13 at 11:46

score 0 · Answer 2 · answered Jan 11 '13 at 11:15

0

var overlay = new google.maps.OverlayView();
var point = overlay.getProjection().fromLatLngToDivPixel(latLng);

answered Jan 11 '13 at 11:15

Marcelo

9,387
3
35
40

Is there some simple way to get map.fromLatLngToDivPixel in API V3?

2 Answers2