This works for me:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<title>
Create web map from id
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/css/Popup.css">
<style type="text/css">
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Helvetica";
}
#header {
border:solid 1px #A8A8A8;
overflow:hidden;
background-color:#999;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#C0C0C0));
background: -moz-linear-gradient(top, #fff, #C0C0C0);
height:65px;
margin: 5px 5px;
}
.roundedCorners {
-o-border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.shadow {
-webkit-box-shadow:4px 4px 8px #adadad;
-moz-box-shadow:4px 4px 8px #adadad;
-o-box-shadow:4px 4px 8px #adadad;
box-shadow:4px 4px 8px #adadad;
}
#title{
padding-top:2px;
padding-left:10px;
color:#000;
font-size:18pt;
text-align:left;
text-shadow: 0px 1px 0px #e5e5ee;
font-weight:700;
}
#subtitle {
font-size:small;
padding-left:40px;
text-shadow: 0px 1px 0px #e5e5ee;
color:#000;
}
#rightPane{
background-color:#E8E8E8;
border:solid 2px #B8B8B8;
margin:5px;
width:20%;
}
#map {
background-color:#FFF;
border:solid 2px #B8B8B8;
margin:5px;
padding:0;
}
.esriLegendServiceLabel{
display:none;
}
</style>
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.arcgis.utils");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Scalebar");
var map;
function init() {
esri.bundle.widgets.legend.NLS_noLegend = 'No Legend Available';
var mapDeferred = esri.arcgis.utils.createMap("92309d85b34342de8514caefa3df56a5", "map", {
mapOptions: {
slider: true,
nav:false
}
});
mapDeferred.addCallback(function(response) {
dojo.byId("title").innerHTML = response.itemInfo.item.title;
dojo.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
map = response.map;
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
//add the legend
var layers = response.itemInfo.itemData.operationalLayers;
if(map.loaded){
initMap(layers);
}
else{
dojo.connect(map,"onLoad",function(){
initMap(layers);
});
}
});
mapDeferred.addErrback(function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
}
function initMap(layers){
//add chrome theme for popup
dojo.addClass(map.infoWindow.domNode, "chrome");
//add a scalebar
var scalebar = new esri.dijit.Scalebar({
map:map,
scalebarUnit: 'english'
});
//add a legend
var layerInfo = dojo.map(layers, function(layer,index){
return {layer:layer.layerObject,title:layer.title};
});
var legendDijit = new esri.dijit.Legend({
map:map,
layerInfos:layerInfo
},"legend");
legendDijit.startup();
}
//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle" > </div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>
