Obtener la instancia google.maps.Map de un HTMLElement

Question

Tengo un mapa existente en una página. Puedo seleccionar ese elemento usando algo en la línea de document.getElementById() para obtener el objeto javascript HTMLElement. ¿Es posible crear la instancia de google.maps.Map cuando se inicializa el mapa, es decir, es una propiedad del objeto HTMLElement o en su prototipo?

Answer 1

No se puede obtener google.maps.Map objeto desde DOM Element, en el que se han construido mapas de Google objeto. google.maps.Map es solo un contenedor, que controla DOM Element para ver el mapa, y ese elemento no tiene referencia a su contenedor.

Si su problema es solo el alcance, haga map como una propiedad del objeto window, y será accesible desde cualquier lugar de su página. Puede hacer 'map' tan global mediante el uso de uno de estos:

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

o

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

Answer 2

Crea una instancia cuando inicializa un mapa;

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

se utiliza ese caso cada vez que desee hacer algo como poner un marcador, el cambio de ubicación, etc. No es un objeto HTMLElement. Sin embargo, tiene un método getDiv(), que le proporciona el elemento html en el que está funcionando.

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

Answer 3

que tenía un problema similar. Todo lo que quería hacer era manipular los mapas después de que se crearon. Intenté algo así (creo que también te ayudará).

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 
    }); 
} 

Lo que hace esta función es después de llamar a él para crear un mapa de algún contenedor: function (más o menos así) que he creado.

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

La función devolverá el objeto que contiene algunos datos utilizados al hacer el mapa. Después de crear un mapa en sí mismo simplemente puedo manipular, en mi caso, marcador en cada mapa por separado utilizando mapa objeto, por ejemplo:

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

Esto cambiará la posición del marcador y el mapa de centro a las mismas coordenadas. Observe que los valores lng y lat son diferentes a los de la función de llamada que crea un mapa.

Espero que ayude.

Answer 4

Puede obtener google.maps.Map objeto de DOM Element, con un pequeño truco.

Cuando inicializa el objeto de mapa, necesita almacenar el objeto en el atributo de datos del elemento.

Ejemplo:

$.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; 
}; 

Después de definir un elemento de mapa, por ejemplo:

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(); 

A continuación, puede conseguir el objeto de mapa más adelante mediante el uso de ID de elemento, por ejemplo:

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') 
      )); 
    } 
}); 

Al usar este método, puede tener múltiples mapas con diferentes comportamientos en una página.

Answer 5

Si está utilizando el componente Google-mapa del proyecto de polímero, puede obtener el mapa Dom existentes así:

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

Una vez que haya que, instancia actual del mapa se puede acceder por:

var currentMapInstance = map.map; 

Answer 6

Al usar var map = $("#map_canvas").gmap('get','map') puede obtener el mapa en una variable y al usar esta variable puede alterar el mapa existente.

Cheers