moving google maps v3 around

Question

I am trying to dynamically move a google map (v3) from one div to the other and the first time I move the map from div "x" to "y" the map jumps nicely, but when I try to move it back to "x", I get:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

I've tried using:

var mapNode1 = map.getDiv();
$("#miniMap").append(mapNode1);

to jump from largeMap to miniMap

and vice versa by using:

var mapNode2 = map.getDiv();
$("#largeMap").append(mapNode2);

I've also tried using:

$("#largeMap").appendTo("#miniMap");

and $("#miniMap").appendTo("#largeMap");

With both methods, I am getting: Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

Does anybody have any ideas?

Thank you!

Are you using #largeMap as element for the Map-initialization? If yes this cannot work, because getDiv() in that case will return #largeMap, and you cannot append #largeMap to #largeMap(it's the same element) — Dr.Molle, Mar 31 '12 at 09:18

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

The most probable causes for the error you describe are listed in another post on stackoverflow. See the accepted answer there. Otherwise, I have to see more of your code (maybe the full source) to try to find the exact cause of the error.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 31 '12 at 07:08

Jeroen

839
13
20

score 1 · Accepted Answer · answered Mar 31 '12 at 07:09

1

Hrmm, turns out the following worked:

I put miniMap inside a miniMapWrapper div and largeMap inside largeMapWrapper and used:

var mapNode1 = map.getDiv();
$("#miniMap").append(mapNode1);

and

$("#largeMap").appendTo("#largeMapWrapper");

to go back

answered Mar 31 '12 at 07:09

Kentor

657
1
10
27

moving google maps v3 around

2 Answers2