[GIS] Change openlayers map div options dynamically

openlayers-2

I have two HTML div on my page,

<div id="map" style="width: 200px; height: 200px; border: 1px solid black"></div>

<div id="map2" style="width: 200px; height: 200px; border: 1px solid black"></div>

I want to move my map from "map" to "map2" but not working. I am using map.setOptions method.

var map = new OpenLayers.Map({
    div: "map",
    center: new OpenLayers.LonLat(0, 0),
    minResolution: "auto",
    maxResolution: "auto",
    layers: [
        new OpenLayers.Layer.OSM()
    ]
});


map.setOptions({
    div: "map2",
    center: new OpenLayers.LonLat(0, 0),
    minResolution: "auto",
    maxResolution: "auto",
    layers: [
        new OpenLayers.Layer.OSM()
    ]
});

DEMO is here.

Best Answer

you can use map.render("map2");

http://jsfiddle.net/expedio/pnzunjpz/