I have managed to change the needed things, but I get the error from the title in the console, and I cannot figure it out what else needs to be done. any ideas? This is my code(if you paste it and run it, it will show):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
<script src="http://js.arcgis.com/3.8/"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.dijit.Legend");
dojo.require("dijit.form.Button");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
var layer, map, visible = [], toolbar, symbol, geomTask, gmap;
function init(mapServer) {
var centerat = new google.maps.LatLng(0, 0);
var options = {
center: centerat,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gmap = new google.maps.Map(document.getElementById("map"), options);
var dynamicMap = new esri.arcgis.gmaps.DynamicMapServiceLayer(mapServer, null, 0.75, dynmapcallback);
}
function dynmapcallback(mapservicelayer) {
gmap.addOverlay(mapservicelayer);
}
</script>
</head>
<body>
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%;">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
<div data-dojo-type="dijit.layout.TabContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Layers', selected:true">
<select id="mapServers">
<option value="">Please select a MapServer</option>
<option
value="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer">Census</option>
<option
value="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer">Bloomfield
Parcels</option>
</select>
<span id="layer_list"></span>
<br />
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
</div>
<script>
$('#mapServers').on('change', function (e) {
var selectedMap = $("option:selected", this);
if (this.value != "")
init(this.value);
});
</script>
</body>
</html>
