4

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 the 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.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Prashant
  • 5,331
  • 10
  • 44
  • 59

4 Answers4

18
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.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Flarex
  • 531
  • 6
  • 16
  • Used as is, the overlay code in V3 of the api will give an error from an undefined value returned by getPosition(). – jerseyboy Feb 09 '12 at 17:40
  • See here for the fix to that, I posted a similar answer. Until the map canvas finishes loading the overlay won't initialize. You need to add a listener that triggers on map finished loading. http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position/6671206#6671206 – Flarex May 25 '12 at 21:46
0

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);
            //...
          });
      },

}
Adam Azad
  • 11,171
  • 5
  • 29
  • 70
pasx
  • 2,718
  • 1
  • 34
  • 26
0

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));
}
CaptainBli
  • 4,121
  • 4
  • 39
  • 58
Jay Lab
  • 13
  • 2
-1

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

Gobi
  • 291
  • 1
  • 5
  • 17