clone google map instance

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??

Answers


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.


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

Need Your Help

Dimension Reduction in Categorical Data with missing values

python r statistics

I have a regression model in which the dependent variable is continuous but ninety percent of the independent variables are categorical(both ordered and unordered) and around thirty percent of the

Postgresql DROP TABLE doesn't work

python database django postgresql

I'm trying to drop a few tables with the "DROP TABLE" command but for a unknown reason, the program just "sits" and doesn't delete the table that I want it to in the database.