Foros del Web » Programando para Internet » Javascript »

Solape de marcas de tooltip de google map v3

Estas en el tema de Solape de marcas de tooltip de google map v3 en el foro de Javascript en Foros del Web. Hola, estoy montando un mapa en google Maps v3, pero los titulos de cada marker (tooltip) se me superponen, estos son generados a trávez del ...
  #1 (permalink)  
Antiguo 13/01/2013, 09:05
 
Fecha de Ingreso: enero-2013
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Pregunta Solape de marcas de tooltip de google map v3

Hola, estoy montando un mapa en google Maps v3, pero los titulos de cada marker (tooltip) se me superponen, estos son generados a trávez del codigo que esta abajo, hay alguna forma de que la div este a la izquierda o a la derecha de las coordenadas en las que esta el marker, y de esta manera reducir el solape de los titulos, les dejo una imagen para que puedan ver..., saludos
y gracias de antemano.


Código:
/*
Constructor for the tooltip
@ param options an object containing: marker(required), content(required) and cssClass(a css class, optional)
@ see google.maps.OverlayView()
*/

function Tooltip(options) {

    // Now initialize all properties.
    this.marker_ = options.marker;
    this.content_ = options.content;
    this.map_ = options.marker.get('map');
	this.cssClass_ = options.cssClass||null;

    // We define a property to hold the content's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    //Explicitly call setMap on this overlay
    this.setMap(this.map_);
	var me = this;
	// Show tooltip on mouseover event.
	google.maps.event.addListener(me.marker_, 'mouseover', function() {
		me.show();
	});
	// Hide tooltip on mouseout event.
	google.maps.event.addListener(me.marker_, 'mouseout', function() {
		me.hide();
	});
}
// Now we extend google.maps.OverlayView()
Tooltip.prototype = new google.maps.OverlayView();

// onAdd is one of the functions that we must implement, 
// it will be called when the map is ready for the overlay to be attached.
Tooltip.prototype.onAdd = function() {

    // Create the DIV and set some basic attributes.
    var div = document.createElement('DIV');
    div.style.position = "absolute";
	// Hide tooltip
	div.style.visibility = "visible";
	if(this.cssClass_)
		div.className += " "+this.cssClass_;

    //Attach content to the DIV.
    div.innerHTML = this.content_;

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the floatPane pane.
    var panes = this.getPanes();
  	panes.floatPane.appendChild(this.div_);
	
  }
// We here implement draw
Tooltip.prototype.draw = function() {

    // Position the overlay. We use the position of the marker
    // to peg it to the correct position, just northeast of the marker.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the coordinates of the marker
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to place the DIV.
    var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());

    // Position the DIV.
    var div = this.div_;
    div.style.left = ne.x + 'px';
    div.style.top = ne.y + 'px';
    
}
// We here implement onRemove
Tooltip.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// Note that the visibility property must be a string enclosed in quotes
Tooltip.prototype.hide = function() {
    if (this.div_) {
      this.div_.style.visibility = "visible";
    }
}

Tooltip.prototype.show = function() {
    if (this.div_) {
      this.div_.style.visibility = "hidden";
    }
}

Etiquetas: titulos, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:37.