How can I display the same html canvas in multiple divs?

Question

I'm making a web app that contains a map (Google Maps) in two separate tabs using twitter bootstrap. I'm trying to figure out a way to have one actual canvas that I can display in both tabs with different dimensions in each. The easiest way I can think of is to just have 2 maps and run the same updates on each whenever something changes. I don't like the idea of doing it that way though. Each tab uses the map in a slightly different way, but it should be the same map.

Is there a way to "bind" a div's content to another div?

Here is a simple code sample to explain what I'm doing:

<ul class="nav nav-tabs">
    <li><a href="#map1-content" data-toggle="tab">Map1</a></li>
    <li><a href="#map2-content" data-toggle="tab">Map2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="map1-content">(I want to display map canvas here)</div>
    <div class="tab-pane active" id="map2-content">(and I also want to put it here with this div's styling)</div>
</div>

<div id="map-canvas"></div>

Answer 1

To directly answer the question:

It is impossible to display the same HTML canvas in multiple DIVs, full stop.

If you want to have the same map appear twice, you need to instantiate two separate canvases and run all updates to both.