Navigazione con i tasti freccia su Google Maps senza fare clic sulla Mappa

Question

Ho provato a cercare nella documentazione dell'API di Google Maps e anche qui ma non sono riuscito a scoprire come farlo.

Sto tentando di impostare la navigazione dei tasti freccia per impostazione predefinita sulla mia mappa, senza la necessità di fare clic sull'area mappa per abilitarla.

ho provato la seguente soluzione senza successo:

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

Qualcuno ha idea di come ciò può essere fatto?

Grazie a tutti.

Answer 1

paio di cose da prendere nota di qui, semplicemente usando .focus() o innescando un'azione click sull'elemento #map div non farà il trucco, perché quelle azioni hanno luogo prima che la mappa viene effettivamente reso sul DOM. Quindi, la prima cosa da riconoscere è l'uso dell'evento tilesloaded fornito dalla libreria di google maps.

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

La seconda cosa sono venuto a scoprire è che non si può semplicemente aggiungere $('#map').click() all'interno del listener di eventi. Questo perché lo #map è il contenitore div - lo script di google maps rende in realtà un intero gruppo di altre div in cima ad esso (che hanno indici z più alti e sono anche ciò che effettivamente detiene i riquadri della mappa). Con un po 'di pirateria informatica in giro, e jQuery è possibile restringere il div che contiene le piastrelle e attivare l'evento click su quel codice di div ... risultante era:

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

ho usato gli strumenti Dev di Chrome per restringere fino al div contenente le tessere e usato il metodo children() di jquery per passare a quel div da #map. Se infili quel codice nella tua funzione di init, dovresti essere pronto. Ecco un JSfiddle con un esempio funzionante della soluzione.