Add Google Basemap via Javascript

deleted-user-XuRyPg9pv1OY · ‎01-18-2014

I am new to writing code and need help displaying a Google basemap (hybrid) in a web map built on the ArcGIS Javascript API. I have a Google Maps API key, which was removed for this example. I used the documentation at http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.00/docs/googlemapslayer/examples.html as a guide, but I am stuck. Any help would be greatly appreciated!

<!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&amp;v=3&amp;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>

Thank you!

Matt

SunilPalkar · ‎01-19-2014

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

deleted-user-XuRyPg9pv1OY · ‎01-20-2014

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

That site is helpful, but I cannot get the sytnax written correctly. Specifically, I don't know where to use setMapTypeId(mapTypeId) to switch between Google Street Map, Satellite, Hybrid and Terrain. I thought the general construct would be to define the variable for the google maps layer, create a function that constructs an esri map, then add the google layer to the map.

Perhaps I am missing something in the HTML that calls the google api? Here is what I am working with now:

<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;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);

Is this eve close?

KaitlynnDavis · ‎01-20-2014

Are you sure that you want to go to the trouble of adding a google basemap? The ArcGIS JavaScript api has a nice basemap gallery widget that lets you switch between a street map, topo map, satellite, hybrid, etc., and it's a lot easier to implement. Here's a link to the sample if you're interested:

https://developers.arcgis.com/en/javascript/jssamples/widget_basemap.html

Otherwise, I would start by doing a ctrl+u to review the client side code for the demo that was linked out from the Google Maps mania article. There you'll see how they write the argument to the setMapTypeId method:

googleLayer.setMapTypeId(agsjs.layers.GoogleMapsLayer.MAP_TYPE_ROADMAP);

In the demo, each "layer" button's click event is handled by a function called changeMap that parses the text of the button's label, and based on that case switches out the basemap with the appropriate layer

deleted-user-XuRyPg9pv1OY · ‎01-22-2014

Ctrl+u just rocked my world... thank you Kait! As I mentioned, I am new to writing code, so that was a huge help. Your explanation of the changeMap function was also extremely helpful. I think I just learned more about javascript in 15 seconds than have over the past 15 weeks.

With regard to the basemap layers, I need to use Google for this example because the imagery is much more recent for the area of interest.

LefterisKoumis · ‎10-10-2016

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.

JonathanUihlein · ‎01-22-2014

Hi Matthew!

Glad to see you are receiving solid help.

As a front-end developer, may I recommend a few tools:

If you use Firefox, you should look into using the Firebug extension.
It's the most helpful tool I've ever used for front-end development, period.

On the Chrome side, developer tools are built in and can be accessed via the shortcuts: Ctrl+shift+I or Ctrl+shift+J.

Lastly, you can use http://www.jslint.com/ to clean up your code and check for syntax errors.
You'll want to customize your options though... jslint is very very picky about certain things (as it should be!)

Hope this helps!

deleted-user-XuRyPg9pv1OY · ‎01-24-2014

Thank you Jon! I was using JSFiddle, but I am going to now use JSLint. Also, I do use Chrome, so I have started to explore the built in tools.

KyleWikstrom · ‎10-06-2014

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

LefterisKoumis · ‎10-11-2016

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