Navegación de las teclas de flecha en Google Maps sin hacer clic en el mapa

Question

Intenté buscar en la documentación de la API de Google Maps y también aquí, pero no pude encontrar la manera de hacerlo.

Estoy tratando de configurar las teclas de flecha de forma predeterminada en mi mapa, sin la necesidad de hacer clic en el área del mapa para habilitar eso.

He intentado lo siguiente solución sin éxito:

map.getDiv().focus(); 
document.getElementById("map_canvas").focus(); 
google.maps.event.trigger(map, 'rightclick'); 

Alguien tiene una idea de cómo eso se puede hacer?

Gracias a todos.

Answer 1

Un par de cosas para tener en cuenta aquí, simplemente usar .focus() o desencadenar una acción de clic en el elemento div #map no funcionará porque esas acciones tienen lugar antes de que el mapa realmente se represente en el DOM. Por lo tanto, lo primero que debe reconocer es el uso del evento tilesloaded que proporciona la biblioteca de google maps.

google.maps.event.addListener(map, 'tilesloaded', function() { 
    //do actions 
}); 

La segunda cosa que vine a descubrir es que no sólo puede añadir $('#map').click() en el interior del detector de eventos. Esto se debe a que aunque el #map es el contenedor div, el script de google maps en realidad representa un montón de otros divs encima (que tienen índices z más altos y también son los que realmente contienen los mosaicos del mapa). Con un poco de piratería alrededor, y jQuery se puede reducir a la div que contiene los azulejos y desencadenar el evento click en ese div ... código resultante fue:

google.maps.event.addListener(map, 'tilesloaded', function() {  
    $("#map").children().children().first().children().trigger('click'); 
}); 

que utilizan herramientas de Chrome Dev para acotar baje al div que contiene las fichas y use el método de children() de jquery para atravesar ese div del #map. Si insertas ese código en tu función init, deberías estar listo para continuar. Aquí hay un JSfiddle con un ejemplo de trabajo de la solución.