Ottieni istanza google.maps.Map da un HTMLElement

Question

Ho una mappa esistente su una pagina. Posso selezionare quell'elemento usando qualcosa sulla falsariga di document.getElementById() per ottenere l'oggetto javascript HTMLElement. È possibile ottenere l'istanza di google.maps.Map creata quando la mappa è inizializzata, cioè è una proprietà dell'oggetto HTMLElement o del suo prototipo?

Answer 1

Non è possibile ottenere google.maps.Map oggetto dal DOM Element, su cui sono stati costruiti Google Maps oggetto. google.maps.Map è solo un wrapper, che controlla DOM Element per la visualizzazione della mappa e quell'elemento non ha riferimento al suo wrapper.

Se il tuo problema è solo l'ambito, imposta map come proprietà dell'oggetto window e sarà accessibile da qualsiasi punto della pagina. È possibile effettuare 'map' come globale utilizzando uno di questi:

window.map = new google.maps.Map(..) 

o

map = new google.maps.Map(...) //AVOID 'var' 

Answer 2

Si crea un'istanza quando si inizializza una mappa;

var map = new google.maps.Map(document.getElementById("map_element"), options); 

di utilizzare tale istanza ogni volta che si vuole fare qualcosa come mettere un marcatore, posizione che cambia, ecc Non è un oggetto HTMLElement. Tuttavia ha un metodo getDiv(), che ti dà l'elemento html su cui sta operando.

map.getDiv(); // in this case it returns the element with the id 'map_element' 

Answer 3

Ho avuto un problema simile. Tutto quello che volevo fare era manipolare le mappe dopo averle create. Ho provato qualcosa del genere (penso che ti aiuterà anche tu).

function load_map(el_id, lat, lng) { 
    var point = new google.maps.LatLng(lat,lng); 
    var myMapOptions = { 
    scrollwheel:false, 
    zoom: 15, 
    center: point, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     position: google.maps.ControlPosition.RIGHT_TOP 
    }, 
    navigationControl: true, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL, 
     position: google.maps.ControlPosition.LEFT_CENTER 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById(el_id),myMapOptions); 
    var marker = new google.maps.Marker({ 
    draggable:true, 
    map: map, 
    position: point 
    }); 
    return({ 
    container:map.getDiv(), 
    marker:marker, 
    mapa:map 
    }); 
} 

Cosa questa funzione non fa altro che dopo aver chiamato per creare una mappa in qualche contenitore: Ho la funzione (più o meno come questo) creato.

var mapa = load_map('mapa_container', 53.779845, 20.485712); 

La funzione restituirà l'oggetto contenente alcuni dati utilizzati durante la creazione della mappa. Dopo aver creato una mappa stessa posso semplicemente manipolare, nel mio caso, pennarello su ogni mappa separatamente utilizzando mapa oggetto, ad esempio:

mapa.marker.setPosition(new google.maps.LatLng(20,30)); 
mapa.mapa.setCenter(new google.maps.LatLng(20,30)); 

Questo cambierà posizione marcatore e mappa centro alle stesse coordinate. Si noti che i valori lng e lat sono diversi, mentre si chiama la funzione che crea una mappa.

Spero che questo aiuti.

Answer 4

È possibile ottenere google.maps.Map oggetto da DOM Element, con un leggero trucco.

Quando si inizializza l'oggetto mappa, è necessario memorizzare l'oggetto sull'attributo dei dati dell'elemento.

Esempio:

$.fn.googleMap = function (options) { 
    var _this = this; 

    var settings = $.extend({}, { 
     zoom: 5, 
     centerLat: 0, 
     centerLon: 0 
    }, options); 

    this.initialize = function() { 
     var mapOptions = { 
      zoom: settings.zoom 
     }; 

     var map = new google.maps.Map(_this.get(0), mapOptions); 
     // do anything with your map object here, 
     // eg: centering map, adding markers' events 

     /******************************************** 
     * This is the trick! 
     * set map object to element's data attribute 
     ********************************************/ 
     _this.data('map', map); 

     return _this; 
    }; 
    // ... more methods 

    return this; 
}; 

Dopo aver definito un elemento della mappa, ad esempio:

var mapCanvas = $('#map-canvas'); 
var map = mapCanvas.googleMap({ 
    zoom: 5, 
    centerLat: 0, 
    centerLong: 0 
}); 
// ... add some pre-load initiation here, eg: add some markers 
// then initialize map 
map.initialize(); 

si può quindi ottenere l'oggetto mappa in seguito utilizzando l'ID di elemento, ad esempio:

var mapCanvas = $('#map-canvas'); 
$('.location').on('click', function() { 
    // google map takes time to load, so it's better to get 
    // the data after map is rendered completely 
    var map = mapCanvas.data("map"); 
    if (map) { 
     map.panTo(new google.maps.LatLng(
      $(this).data('latitude'), 
      $(this).data('longitude') 
      )); 
    } 
}); 

Utilizzando questo metodo, è possibile avere più mappe con comportamenti diversi su una pagina.

Answer 5

Se si utilizza Google-map componente dal progetto Polymer, è possibile ottenere la mappa Dom esistente in questo modo:

var map = document.querySelector('google-map'); 

Una volta che, istanza corrente di mappa si può accedere:

var currentMapInstance = map.map; 

Answer 6

Utilizzando var map = $("#map_canvas").gmap('get','map') è possibile ottenere la mappa in una variabile e utilizzando questa variabile è possibile modificare la mappa esistente.

Cheers