I wanted to ask if anyone knows how to move map from one div to another. Why you would ask... let's say i created plex map, with many tools, letting user to add markers, lines, polygones, save the map position, add infowindows and much more. I am using one div to show the map - all objects are downloaded from database, and put on the map. Then when i press the "change map" button, i get the popup (yeah, that's what i want, i don't want new window) and there is the same map, but with tools which let you to edit it. The problem is, i am atm using same div id, and i am afraid there is some conflict, as my tools are working till i wont refresh map. I am afraid that its because the map below popup is still somehow active, and these functions i am using on the popup map, are used on both? And messing things up?

Or is there a way, to close the map pletely, lets say i got a div with a map, and after pushing the button, the map disappears/is closed and i see the div it was in?

I've tried messing around with "mapa = new google.maps.Map(document.getElementById("map_div"), mapOptions);

but i just don't know what to do to make the old div gone/inactive/not used. using same line, just changing div, will create map in both dives, and all functions are made on second map created, so that not a solution.

I wanted to ask if anyone knows how to move map from one div to another. Why you would ask... let's say i created plex map, with many tools, letting user to add markers, lines, polygones, save the map position, add infowindows and much more. I am using one div to show the map - all objects are downloaded from database, and put on the map. Then when i press the "change map" button, i get the popup (yeah, that's what i want, i don't want new window) and there is the same map, but with tools which let you to edit it. The problem is, i am atm using same div id, and i am afraid there is some conflict, as my tools are working till i wont refresh map. I am afraid that its because the map below popup is still somehow active, and these functions i am using on the popup map, are used on both? And messing things up?

Or is there a way, to close the map pletely, lets say i got a div with a map, and after pushing the button, the map disappears/is closed and i see the div it was in?

I've tried messing around with "mapa = new google.maps.Map(document.getElementById("map_div"), mapOptions);

but i just don't know what to do to make the old div gone/inactive/not used. using same line, just changing div, will create map in both dives, and all functions are made on second map created, so that not a solution.

• javascript
• google-maps
• html
• google-maps-api-3

• Can you just produce an ID for each of your div's that is random, such as a unique id of some kind? – jjwdesign Commented Nov 10, 2011 at 0:38
• well, i can give unique id to each of these divs, but to create a map in new div, with id="map_div2" i would need to use same line, and use same global variable "mapa" - and it would be used in old div too. If i used other variable, i would need to rewrite all my functions for new map variable, and that would be a lot of work – Kedor Commented Nov 10, 2011 at 0:49

1 Answer 1

Moving a map to another div is simple, it's just a matter of manipulating the DOM tree. See answer to this map cloning question.