клон экземпляра карты Google

Question

У меня есть карта на странице, которая отображает несколько мест с маркерами и информационными окнами. Теперь я хотел бы поместить полноэкранную кнопку и загрузить карту в диалог jquery-ui, но у меня есть некоторые проблемы.

Есть ли способ скопировать экземпляр карты Google, который я создал в одном div, в другой div?

Или любой другой обходной путь, например, изменение div, связанного с картой ... научная фантастика ??

Answer 1

Я не думаю, что сами Карты Google поддерживают такие манипуляции.

Хотя кажется, что перемещение карты довольно просто. Карта имеет метод getDiv, который возвращает Node, содержащий карту. Используя jQuery, вы можете манипулировать DOM:

var mapNode = that.map.getDiv();
$('#destinationDiv').append(mapNode);

Он просто перемещает карту div в destinationDiv. Я протестировал его в Chrome и Firefox, и он работал хорошо, но я не совсем уверен, работает ли он правильно (если функциональность карты не нарушена) во всех основных браузерах.

Но мне не удалось скопировать карту. Использование метода клонирования в jQuery создает поврежденную копию карты. Если вам нужно скопировать его, я думаю, что единственным способом может быть создание совершенно новой карты и создание всех объектов с нуля.

Answer 2

Просто чтобы включить более полный пример кода из недавнего проекта, который использовал представленное здесь решение:

    // init map
    if(!$scope.map) {
      console.log("no $scope.map");

      if (!window.globalMap) {
        console.log("initializing new main map");
        window.globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);
      }
      else {
        console.log("recycling map, with options:", mapOptions);
        var mapNode = window.globalMap.getDiv();
        $('#map').append(mapNode);
        window.globalMap.setOptions(mapOptions);
        google.maps.event.trigger(globalMap, "resize");
      }

      $scope.map = window.globalMap;
    }