Question

Im try to get the markers coordinates to the map, or to the window, to set a special functions when i make over with the mouse, my test code is this:

        var multiMarker = [];
    var xmyOptions = { // Ponemos unas coordenadas iniciales al mapa de google maps.
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var xmap = new google.maps.Map($('#map_canvas2').get(0), xmyOptions); // Iniciamos el mapa indicando el Div donde se va a cargar y las opciones.

    for (x=0; x<9; x++) {

        multiMarker[x] = new google.maps.Marker({ // Definimos una nueva "marca" o puntero
            position: new google.maps.LatLng('40.' + Math.floor(Math.random()*99999999), '-3.' + Math.floor(Math.random()*99999999)),
            draggable: true,
            map: xmap,
            title: 'Ejemplo marcador arrastrable'
        });

        google.maps.event.addListener(multiMarker[x], 'mouseover', function(){
            console.log(this);
        });

    }

    var bounds = new google.maps.LatLngBounds();  
    for (index in multiMarker) {  
        var data = multiMarker[index];  
        bounds.extend(new google.maps.LatLng(data.position.Oa, data.position.Pa));  
    }  
    xmap.fitBounds(bounds); 

The problem is i cant get this coordinates in the marker[x] object, i only see the latitude and longitude, and I need the top, left, bottom or right position of the marker to set special floating tooltips. The API doesnt have this info?

Thanks.

Answer 1

I answered similar question here: How to access Google Maps API v3 marker's DIV and its pixel position?

What you can get is position of marker in world coordinate, then convert to offset from top left corner of visible rectangle. But it’s only position, you don’t have access to marker itself, so you can’t add events to it or alter marker div this way.

var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
    Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);

If for some reason you need access to marker’s div, then you need to check what divs are created for map, select in which layer (markers are in one layer, but I don’t remember which, don’t confuse them with marker shadows :-)) and then somehow check which position this divs have, to select one you need.