Получить экземпляр google.maps.Map из элемента HTMLElement

Ответ 1

Вы не можете получить объект google.maps.Map из DOM Element, на котором был создан объект Google Maps. google.maps.Map - это просто оболочка, которая управляет DOM Element для просмотра карты, и этот элемент не имеет ссылки на свою оболочку.

Если ваша проблема - это только область видимости, сделайте map как свойство объекта window, и она будет доступна из любой точки вашей страницы. Вы можете сделать 'map' глобальным, используя один из них:

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

или

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

Ответ 2

Вы можете получить google.maps.Map объект из DOM Element с небольшим трюком.

Когда вы инициализируете объект карты, вам нужно сохранить объект по атрибуту данных элемента.

Пример:

$.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 data attribute
         ********************************************/
        _this.data('map', map);

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

    return this;
};

После определения элемента карты, например:

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

вы можете получить объект карты позже, используя идентификатор элемента, например:

var mapCanvas = $('#map-canvas');
$('.location').on('click', function () {
    // google map takes time to load, so it 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')
            ));
    }
});

Используя этот метод, вы можете иметь несколько карт с различным поведением на странице.

Ответ 3

У меня была аналогичная проблема. Все, что я хотел сделать, это манипулировать картами после того, как они были созданы. Я пробовал что-то вроде этого (я думаю, это тоже поможет). Я создал функцию (более или менее):

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

Что делает эта функция, после вызова ее для создания карты в каком-то контейнере.

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

Функция возвращает объект, содержащий некоторые данные, используемые при создании карты. После создания самой карты я могу просто манипулировать в моем случае маркером на каждой карте отдельно с помощью объекта mapa, например:

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

Это изменит положение маркера и карту центра на те же самые коорды. Обратите внимание, что значения lng и lat различаются, а при вызове функции, которая создает карту.

Надеюсь, что это поможет.

Ответ 4

Вы создаете экземпляр при инициализации карты;

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

Вы используете этот экземпляр всякий раз, когда хотите сделать что-то вроде пометки, изменения местоположения и т.д. Это не объект HTMLElement. Однако он имеет метод getDiv(), который дает вам элемент html, над которым он работает.

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

Ответ 5

Если вы используете компонент Google-карты из проекта Polymer, вы можете получить существующую карту Dom следующим образом:

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

Как только у вас есть, к текущему экземпляру карты можно получить доступ:

var currentMapInstance = map.map;

Ответ 6

Используя var map = $("#map_canvas").gmap('get','map'), можно получить карту в переменную, и с помощью этой переменной можно изменить существующую карту.

Приветствия