Search code examples
jquerygoogle-mapsclone

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

Solution

  • 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.