<!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.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" /> <link rel="stylesheet" href="css/layout.css"/> <script> var djConfig = { parseOnLoad: true, packages: [{ "name": "agsjs", "location": 'https://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load }] }; </script> <script src="http://maps.google.com/maps?file=api&v=3&key=" type="text/javascript"></script> <script src="http://js.arcgis.com/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>
Hello Matt,
Please check following site with an example +code
http://googlemapsmania.blogspot.in/2011/11/google-maps-layer-for-arcgis-javascript.html
Please check this example
<script src="http://maps.google.com/maps?file=api&v=3&key=AIzaSyCiAV1xyBVrC0GQY9btG8U1W6siowDtNZ0" type="text/javascript"></script> <script src="http://js.arcgis.com/3.8/"></script> <script> var djConfig = { parseOnLoad: true, baseUrl: './', modulePaths: { 'agsjs': 'C:\Matt\Data\Collective\FJV\Scripts\layout_MapContainerSplitLeft\gmapslayer\agsjs\build\agsjs' } }; 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("agsjs.layers.GoogleMapsLayer"); function init() { map = new esri.Map("map", { extent: initExtent, logo: false center: [-80.65862, 27.820309] }); var gMapLayer = new agsjs.layers.GoogleMapsLayer({ visible: false, id: 'googlemaps', apiOptions: { v: '3.6' } }); map.addLayer(gMapLayer); dojo.ready(init);
googleLayer.setMapTypeId(agsjs.layers.GoogleMapsLayer.MAP_TYPE_ROADMAP);
Hello Matt. I'd like to add the google basemap on arcgis js apps. Did you get it working? I have a license for google maps.
Thanks.
I can tell that this is where I want to be. This is great stuff with the basemap gallery including Google maps. However, I'm lost in how to implement it in the Configurable Map Viewer that I've been working with from some great folks on GitHub (https://github.com/cmv/cmv-app ). Has anyone worked with the two of these together, or offer some much needed assistance? I will be honest and admit that I've become lost in all the code.
I would appreciate some step instruction. Thanks!
Kyle
Wow. Thank you Panayioti. I was not aware of this.
For the rest of you reading this post, I found this discussion very helpful:
Google Maps Tile URL for HYBRID mapType tiles? - Stack Overflow