¿Cómo crear una superposición de texto en Google Maps API v3 que no funciona?

Question

Estoy usando Google Maps API v3. Me gustaría crear una superposición de texto en un mapa que no se mueve cuando se panoramiza el mapa. ¿Es el mejor método para manipular los elementos DOM accesibles desde el objeto MapPanes o es mejor crear un control personalizado aunque no haga mucho más que mostrar texto?

Answer 1

La forma más simple que encontré funcionó para mí fue agregar algunas líneas de JavaScript después de crear un nuevo mapa. Así, después de esto:

map = new google.maps.Map('myMapDivId', mapOptions); 

añadir lo siguiente:

var myTitle = document.createElement('h1'); 
myTitle.style.color = 'white'; 
myTitle.innerHTML = 'Hello World'; 
var myTextDiv = document.createElement('div'); 
myTextDiv.appendChild(myTitle); 

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(myTextDiv); 

es probable que desee para el estilo del texto a buscar más agradable.

Una alternativa es poner el div en el código HTML:

<div id="myTextDiv" style="color: white; position: absolute;"> 
    <h1>Hello World</h1> 
</div> 

y luego hacer esto en su JavaScript:

var myControl = document.getElementById('myTextDiv'); 
map.controls[google.maps.ControlPosition.TOP_CENTER].push(myControl); 

NOTA una diferencia importante: si utiliza la ruta HTML para definir su div, debe establecer el estilo de posición en absoluto en el HTML para evitar problemas de representación.

Answer 2

De usted está describiendo, el mejor enfoque sería un control personalizado. Los documentos para eso son here. Los controles personalizados pueden ser tan simples o complicados como lo desee.

Uno de los motivos por los que te gustaría ensuciar con los paneles del mapa es si querías que ese "control" estuviera debajo de los marcadores/sombras/polilíneas, etc. Estoy haciendo esto ahora mismo para mostrar un punto de mira en el centro del mapa en todo momento. Pero debido a que lo mantengo como una superposición, elijo los paneles de tal manera que los marcadores están sobre él, por lo que se puede seguir haciendo clic e interactuando con ellos, utilizando el mapPane. Así es como lo estoy haciendo:

var CrosshairOverlay = function(map){ 
    this._holder = null; 
    this.setMap(map); 
}; 
CrosshairOverlay.prototype = new google.maps.OverlayView(); 
CrosshairOverlay.prototype.onAdd = function(){ 
    var map = this.getMap(); 
    var holder = this._holder = $('<div>').attr('id', 'crosshair')[0]; 

    var crosshairPaper = this._paper = R(holder, 150, 150); 
    // ... all your drawing and rendering code here. 
    var projection = this.getProjection(); 
    var wrappedHolder = $(holder); 

    var updateCrosshairPosition = function(){ 
     var center = projection.fromLatLngToDivPixel(map.getCenter()); 
     wrappedHolder.css({left:center.x-75, top:center.y-75}); 
    } 
    _.each(['drag','dragend','bounds_changed','center_changed','zoom_changed','idle','resize'], function(event){    
     google.maps.event.addListener(map, event, updateCrosshairPosition); 
    }); 
    google.maps.event.addListener(map, 'maptypeid_changed', function(){ 
     _.defer(updateCrosshairPosition); 
    }); 

    this.getPanes().mapPane.appendChild(holder); 
}; 
CrosshairOverlay.prototype.draw = function(){ 
}; 
CrosshairOverlay.prototype.onRemove = function(){ 
    this._holder.parentNode.removeChild(this._holder); 
    this._holder = null; 
}; 

La razón por la maptypeid_changed tiene su propio controlador con un defer se debe a que el evento se dispara antes de que el mapa establece adecuadamente a sí misma cuando se cambia el tipo. Simplemente ejecute su función después del ciclo de eventos actual.