marcador google maps v3 mouseover tooltip

Question

Quiero poner un tooltip hecho con divs cuando el mouse está sobre un marcador, pero no sé cómo obtener la posición de la pantalla para poner el div en la posición correcta, aquí está mi código:

google.maps.event.addListener(marker, "mouseover", function() { 
      divover.css("left", marker.get("left")); 
      divover.css("top", marker.get("top")); 
      divover.css("display", "block"); 
}); 

google.maps.event.addListener(marker, "mouseout", function() { 
      divover.css("display", "none"); 
}); 

Obviamente, el método get falla. ¿Alguna idea?

Answer 1

Esto es complicado. En v2 de la API, que puede hacer:

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel); 

en v3, el fromLatLngToContainerPixel método se ha movido al objeto MapCanvasProjection. Para obtener un objeto MapCanvasProjection, debe llamar a getProjection en un objeto OverlayView. Parece que la clase Marker se extiende desde OverlayView, pero desafortunadamente no tiene el método getProjection. No tengo idea de por qué, puede valer la pena presentar un error.

La forma en que he hecho es mediante la creación de mi propia clase de marcador personalizado, basado en OverlayView, por lo que todavía tiene el método getProjection:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 

Usted puede leer el tutorial de Google en custom overlays o copiar su example para que comiences

Answer 2

encontrado una solución en another post:

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition()) 

Answer 3

que estaba teniendo problemas para conseguir la proyección de actualizar después de arrastrar el mapa con el método aquí o la creación de un OverlayView maniquí y el uso de su proyección. He encontrado una solución que funciona al 100% para mí aquí: http://qfox.nl/notes/116

/** 
* @param {google.maps.Map} map 
* @param {google.maps.LatLng} latlng 
* @param {int} z 
* @return {google.maps.Point} 
*/ 
var latlngToPoint = function(map, latlng, z){ 
    var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255 
    var scale = Math.pow(2, z); 
    var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale); 
    return pixelCoordinate; 
}; 
/** 
* @param {google.maps.Map} map 
* @param {google.maps.Point} point 
* @param {int} z 
* @return {google.maps.LatLng} 
*/ 
var pointToLatlng = function(map, point, z){ 
    var scale = Math.pow(2, z); 
    var normalizedPoint = new google.maps.Point(point.x/scale, point.y/scale); 
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint); 
    return latlng; 
}; 

Answer 4

infowindow está diseñado para resolver este problema. http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Answer 5

Aquí es un enlace a un tutorial que acabo de crear sobre cómo crear un texto de ayuda para la API de Google Maps V3: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ Para verlo en acción, vaya aquí http://medelbou.com/demos/google-maps-tooltip/

Answer 6

De alguna manera, ninguno de la otra respuesta funcionó para mí o no quería implementarlos (por ejemplo, creating your own custom Marker class).

Después de un poco más de la búsqueda me encontré this solution, sin embargo, que hace exactamente lo que se necesita:

function latlngToPoint(map, latLng) { 
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
    var scale = Math.pow(2, map.getZoom()); 
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng); 
    var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 
    return point; 
} 

A continuación, sólo llamar var position = latlngToPoint(map, marker.getPosition()); y utilizar la posición de :-) contenido de su corazón