Please review the code below for correctness. I am trying to display a Google basemap (hybrid) in a web map built on the ArcGIS Javascript API 3.8. I have a Google Maps API key, which was removed for this example. So far, I have reviewed the documentation here .05/docs/googlemapslayer/examples.html, but I am still stuck.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href=".8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href=".8/js/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css"/>
<script>
var djConfig = {
parseOnLoad: true,
packages: [{
"name": "agsjs",
"location": '.04/xbuild/agsjs' // for xdomain load
}]
};
</script>
<script src=";amp;v=3&key=" type="text/javascript"></script>
<script src=".8/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("agsjs.layers.GoogleMapsLayer");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.dijit.Legend");
var map, googleLayer;
function init() {
map = new esri.Map("map", {
center: [-82.65862, 29.820309],
zoom: 16
});
googleLayer = new agsjs.layers.GoogleMapsLayer({
id: 'google',
apiOptions: {
v: '3'
},
});
map.addLayer(googleLayer);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%; height:100%;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Tool
</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:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Identified Issues'" ></div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"></div>
</div>
</body>
</html>
Please review the code below for correctness. I am trying to display a Google basemap (hybrid) in a web map built on the ArcGIS Javascript API 3.8. I have a Google Maps API key, which was removed for this example. So far, I have reviewed the documentation here http://gmaps-utility-gis.googlecode./svn/tags/agsjs/1.05/docs/googlemapslayer/examples.html, but I am still stuck.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis./3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis./3.8/js/esri/css/esri.css" />
<link rel="stylesheet" href="css/layout.css"/>
<script>
var djConfig = {
parseOnLoad: true,
packages: [{
"name": "agsjs",
"location": 'https://gmaps-utility-gis.googlecode./svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
}]
};
</script>
<script src="http://maps.google./maps?file=api&v=3&key=" type="text/javascript"></script>
<script src="http://js.arcgis./3.8/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("agsjs.layers.GoogleMapsLayer");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.dijit.Legend");
var map, googleLayer;
function init() {
map = new esri.Map("map", {
center: [-82.65862, 29.820309],
zoom: 16
});
googleLayer = new agsjs.layers.GoogleMapsLayer({
id: 'google',
apiOptions: {
v: '3'
},
});
map.addLayer(googleLayer);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%; height:100%;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Tool
</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:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Identified Issues'" ></div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"></div>
</div>
</body>
</html>
3 Answers
Reset to default 3I used the following script(s) for including Google Maps in my ArcGIS app. There are a few bugs (streetview when using Chrome) but overall it works well. To fix the issue in Chrome the z-index of the Google Basemaps div.
Google Maps Layer for ArcGIS JavaScript API
Unfortunately, the agsjs widget does not work past the ArcGIS Javascript api, version 3.3. Also, street view will no longer work. You can no longer grab the pegman control and propogate him to a level above esri's map layers in order to use him. When the Google visual refresh was no longer an option is when this stopped working.
You can use WebTiledLayer to create any custom tiled layer
googleHybrid = new esri.layers.WebTiledLayer(
"http://mt${subDomain}.google./vt/lyrs=s,h&hl=fa&gl=fa&x=${col}&y=${row}&z=${level}&s=png",
{
"id": "googleHybrid",
"subDomains": ["0", "1", "2", "3"],
copyright: "Google, 2017"
});