clone google map instance

Question

I have a map on a page which displays several places with markers and infowindows. Now I'd like to put a fullscreen button and load the map into a jquery-ui dialog, but I've got some problems.

Is there a way to copy the google map instance I've created in one div, into the other div?

Or any other workaround, like changing the div associated with the map... science-fiction??

Answer 1

I don't think Google Maps themselves support such manipulation.

Although it seems that moving the map is quite simple. The map has a method getDiv which returns Node containing the map. Using jQuery you can then manipulate the DOM:

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

It simply moves the map div into the destinationDiv. I tested it in Chrome and Firefox and it worked well, but I'm not really sure if it works properly (if the map's functionality isn't broken) in all main browsers.

But I wasn't successful in copying the map. Utilizing jQuery's clone method produces broken copy of the map. If you need to copy it, I guess the only way might be to create completely new map and create all the objects from scratch.

Answer 2

Just to include a more complete code example from a recent project that used the solution presented here:

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