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.