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!

Answer 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