topic Re: Add Google Basemap via Javascript in ArcGIS JavaScript Maps SDK Questions

Add Google Basemap via Javascript

deleted-user-XuRyPg9pv1OY — Sun, 12 Dec 2021 03:56:27 GMT

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

Re: Add Google Basemap via Javascript

SunilPalkar — Mon, 20 Jan 2014 04:12:06 GMT

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

Re: Add Google Basemap via Javascript

deleted-user-XuRyPg9pv1OY — Sun, 12 Dec 2021 03:56:30 GMT

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?

Re: Add Google Basemap via Javascript

KaitlynnDavis — Sun, 12 Dec 2021 03:56:33 GMT

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

Re: Add Google Basemap via Javascript

deleted-user-XuRyPg9pv1OY — Wed, 22 Jan 2014 15:37:41 GMT

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.

Re: Add Google Basemap via Javascript

JonathanUihlein — Wed, 22 Jan 2014 16:10:11 GMT

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!

Re: Add Google Basemap via Javascript

deleted-user-XuRyPg9pv1OY — Fri, 24 Jan 2014 17:24:38 GMT

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.

Re: Add Google Basemap via Javascript

KyleWikstrom — Mon, 06 Oct 2014 22:07:32 GMT

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

Re: Add Google Basemap via Javascript

LefterisKoumis — Mon, 10 Oct 2016 23:02:08 GMT

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.

Re: Add Google Basemap via Javascript

LefterisKoumis — Tue, 11 Oct 2016 15:50:23 GMT

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

Re: Add Google Basemap via Javascript

LefterisKoumis — Wed, 12 Oct 2016 20:29:05 GMT

Thank you. However, it seems that the use of the above urls for the google maps violate the terms of use with Google. For the users who have a license how do they specify their license key or clientID?

Re: Add Google Basemap via Javascript

ChristopherSchreiber — Tue, 14 Feb 2017 13:54:25 GMT

Is this allowed with Google Maps TOS? I have read before that Google does not allow it's maps to be used in any application that is based off of another mapping API (Like Esri).

Thanks,

Chris

Re: Add Google Basemap via Javascript

RobertScheitlin__GISP — Tue, 14 Feb 2017 13:59:00 GMT

Christopher,

You are correct this is a violation of the TOS.

Re: Add Google Basemap via Javascript

LefterisKoumis — Tue, 14 Feb 2017 16:37:53 GMT

It is not clear in the Google TOS that it is a violation to use Google Map on another API, if you possess a license.

Re: Add Google Basemap via Javascript

ChristopherSchreiber — Tue, 14 Feb 2017 16:43:46 GMT

Lefteris,

Here is the entry that I am referencing:

No use of Content with a non-Google map. You must not use the Content in a Maps API Implementation that contains a non-Google map.

This is Requirement 10.4.e.

Link: Google Maps APIs Terms of Service | Google Maps APIs | Google Developers

I am not sure how licensing works with this though, I would contact a Google rep just to be sure.

Chris

Re: Add Google Basemap via Javascript

LefterisKoumis — Tue, 14 Feb 2017 17:03:22 GMT

Thanks. I believe that when you purchase a license there is no condition that the license can be used only on Google API based products. Unless it is explicitly stated otherwise, when you purchase a license for a software you are free to use it (not modify) as you wish.