Get marker position in (x,y) in Google maps

I am using google maps. I want to display custom info-window on marker click. For that the upper-left tip of my custom info window should cover th开发者_运维问答e marker.

The problem is I can not get the exact (x,y) ie map-div position of marker on map. For the first time I can get it using :

var mposition = map.fromLatLngToDivPixel(marker.getLatLng());
pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(mposition.x,mposition.y));

But when I drag the map, the marker position in x,y remains same and thus my info-window appears at wrong location. Please help me out how can I get the exact div-related position of marker on map even after drag/zoom.

Thanks.

---

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

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

You can now access your pixel coordinates through p.x and p.y.

Alternatively you could just try changing your fromLatLngToDivPixel to fromLatLngToContainerPixel. Before panning the map both functions will return the same values, but after moving or manipulating anything around in the map, the DivPixel function will return an updated value with regards to it's original position, ie: +x / +y pixels. The ContainerPixel function will return values with regards to the top left corner of your container div.

---

Here is my code without the classes:

var map = null;
var ERROR_MESSAGES = {
    GPS_OFF: "please turn on GPS from your settings.",
    GPS_TIME_OUT: "maybe you are in a building or something, get into an open area.",
    GPS_UNKOWN: "Error happened while getting location, please try again later."
};

var geolocationManager = new GeolocationManager();
function success(position) {
    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var options = {
        zoom: 18,
        center: coords,
        mapTypeControl: false,
        disableDefaultUI: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapcontainer"), options);
    var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon:'e-pin.png',
      animation:google.maps.Animation.BOUNCE
    });
}

function findPosition(onSuccess) {
    geolocationManager.isLocationEnabled(function (isEnabled) {
        if (!isEnabled) {
            Util.Alert(ERROR_MESSAGES.GPS_OFF);
            return;
        }
    geolocationManager.find(onSuccess, function (e) {
            Util.Alert(ERROR_MESSAG`enter code here`ES.GPS_UNKOWN);
        });

    }, function (e) {
        geolocationManager.find(onSuccess, function (e) {
            Util.Alert(ERROR_MESSAGES.GPS_UNKOWN);
        });
    });
}
function watchPosition () {
    geolocationManager.watch();
}

findPosition(success);
function getLocation() {
    if (!map)
        findPosition(success);
    else
        findPosition(showPosition);

    /*if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }*/
}
function setCurrentPosition() {
    findPosition(function (position) {
        var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.panTo(coords);
    });
}
function showPosition(position) {
    map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
}

---

After struggling a while to get this to work, reading the other post and the doc, etc., here is some updated code with everything in the right place:

var Demo = {

       overlay:null,
       map:null,

       //callback for route request to DirectionsService
       showDirections: function(dirResult, dirStatus) {
          //...
          //set up overlay
          Demo.overlay = new google.maps.OverlayView();
          Demo.overlay.draw = function() {};
          Demo.overlay.setMap(Demo.map);
          //add listener to get x y once map is drawn
          google.maps.event.addListener(Demo.map, 'idle', function(){
            var proj = Demo.overlay.getProjection();
            var xy = proj.fromLatLngToContainerPixel(pos);
            //...
          });
      },

}

---

see this jquery based mapping how it will help something for you,

http://marcgrabanski.com/webroot/resources/jquery-ui-google-maps/tutorial-part1.html http://marcgrabanski.com/webroot/resources/jquery-ui-google-maps/tutorial-part2.html

Thanxs, Gobi