topic Re: How to add google maps as a layer in Esri Javascript API?? in ArcGIS JavaScript Maps SDK Questions

How to add google maps as a layer in Esri Javascript API??

NickGramsky — Wed, 16 Feb 2011 23:53:23 GMT

Hi,

I'm referencing the following webpage: http://gmaps-utility-gis.googlecode.com/svn-history/r275/trunk/gmapslayer/docs/examples.html and trying to make a google map a layer. However I'm confused about the example. When i look at the source I see gmaplayers_compiled.js located at ../   I copied the gmapslayer_compiled.js file from code.google to my machine and reference it correctly, but this does not work. I even tried something VERY simple like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Google Test</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
        <script type="text/javascript" src="./gmapslayer.js"></script>
    <script type="text/javascript" language="Javascript">


      dojo.require("esri.tasks.query");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");

      function init() {

var initExtent = new esri.geometry.Extent({
                "xmin": -14628212,
                "ymin": 714227,
                "xmax": 7718305,
                "ymax": 9832858,
                "spatialReference": {
                  "wkid": 102100
                }
              });

map = new esri.Map("mapDiv", {
         extent: initExtent,
         logo: true
       });

       var gMapLayer = new gmaps.GoogleMapsLayer();
//     var gMapLayer = new gmaps.GoogleMapsLayer({visible:true, id:'googlemaps'});
       map.addLayer(gMapLayer);

   gMapLayer.show();

      }

      dojo.addOnLoad(init);
    </script>
</head>
<body>

        <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

      <br />
      <br />

   <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
   </div>

</body>
</html>

But it still doesn't work. I get no errors in the browser error console but I also get no map. What am I missing with this example/this concept?

Re: How to add google maps as a layer in Esri Javascript API??

HemingZhu — Thu, 17 Feb 2011 12:40:11 GMT

Hi,

I'm referencing the following webpage: http://gmaps-utility-gis.googlecode.com/svn-history/r275/trunk/gmapslayer/docs/examples.html and trying to make a google map a layer. However I'm confused about the example. When i look at the source I see gmaplayers_compiled.js located at ../   I copied the gmapslayer_compiled.js file from code.google to my machine and reference it correctly, but this does not work. I even tried something VERY simple like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Google Test</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
        <script type="text/javascript" src="./gmapslayer.js"></script>
    <script type="text/javascript" language="Javascript">


      dojo.require("esri.tasks.query");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");

      function init() {

var initExtent = new esri.geometry.Extent({
                "xmin": -14628212,
                "ymin": 714227,
                "xmax": 7718305,
                "ymax": 9832858,
                "spatialReference": {
                  "wkid": 102100
                }
              });

map = new esri.Map("mapDiv", {
         extent: initExtent,
         logo: true
       });

       var gMapLayer = new gmaps.GoogleMapsLayer();
//     var gMapLayer = new gmaps.GoogleMapsLayer({visible:true, id:'googlemaps'});
       map.addLayer(gMapLayer);

   gMapLayer.show();

      }

      dojo.addOnLoad(init);
    </script>
</head>
<body>

        <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>

      <br />
      <br />

   <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
   </div>

</body>
</html>

But it still doesn't work. I get no errors in the browser error console but I also get no map. What am I missing with this example/this concept?

You have to use ArcGIS Extension for the Google Maps API in order to use google maps with ESRI's stuff. Go: http://help.arcgis.com/EN/webapi/javascript/gmaps/index.html for reference

Re: How to add google maps as a layer in Esri Javascript API??

BryanBaker — Sat, 11 Dec 2021 20:03:07 GMT

I was able to get your page to work by setting the gmaps layer to not visible initially, then also setting the map type after showing it. There may be a bug in the gmaps utility where it must be turned off and then on before it'll work.

        //var gMapLayer = new gmaps.GoogleMapsLayer();
        var gMapLayer = new gmaps.GoogleMapsLayer({visible:false, id:'googlemaps'});
        map.addLayer(gMapLayer);

        gMapLayer.show();
        gMap.setMapTypeId('roadmap');

Re: How to add google maps as a layer in Esri Javascript API??

derekswingley1 — Thu, 17 Feb 2011 18:27:28 GMT

Try downloading the zipped source from the resource center. Unzip it and load the page in the "examples" directory. Does that work?

Re: How to add google maps as a layer in Esri Javascript API??

NickGramsky — Fri, 18 Feb 2011 02:39:06 GMT

I downloaded the src and examples to my box. The only change I made to the file is the following:

I changed this:
<script type="text/javascript" src="../src/gmapslayer_compiled.js">

to this:
<script type="text/javascript" src="./gmapslayer_compiled.js">

as the gmapslayer_compiled.js is in the same dir as my .html file.

The page loads fine but none of the google maps load. It's like my machine doesn't like the gmapslayer_compiled.js file to be local. If I load the URL of the example it loads fine, just not when I store it locally. What else could I be missing?

@hzhu: I don't believe there is anything to download. I am using the Javascript API and I believe that google extension is already there, correct? Looking at that reference I see only how to use both Esri and Google at the same time, but they reference how to do so in JS, which is what I am trying to do but failing somehow.

Re: How to add google maps as a layer in Esri Javascript API??

HemingZhu — Fri, 18 Feb 2011 12:22:25 GMT

I downloaded the src and examples to my box. The only change I made to the file is the following:

I changed this:
<script type="text/javascript" src="../src/gmapslayer_compiled.js">

to this:
<script type="text/javascript" src="./gmapslayer_compiled.js">

as the gmapslayer_compiled.js is in the same dir as my .html file.

The page loads fine but none of the google maps load. It's like my machine doesn't like the gmapslayer_compiled.js file to be local. If I load the URL of the example it loads fine, just not when I store it locally. What else could I be missing?

@hzhu: I don't believe there is anything to download. I am using the Javascript API and I believe that google extension is already there, correct? Looking at that reference I see only how to use both Esri and Google at the same time, but they reference how to do so in JS, which is what I am trying to do but failing somehow.

I have not done API for google map for year or two. So I might be wrong. API for google map is basically an extension of Google Map API. If you look at posted samples, ArcGIS layer is added on the Google map, not the opposite like the ArcGIS javascript API where Bing map is added to ESRI's map as a layer. However, using the Google map extension you can still do most of things that Javascript API can do. Plus somethings that Javascript API can not do like traffic, 3D etc (you can do streetview on any of the ESRI APIs through).

Re: How to add google maps as a layer in Esri Javascript API??

derekswingley1 — Fri, 18 Feb 2011 13:47:38 GMT

I have not done API for google map for year or two. So I might be wrong. API for google map is basically an extension of Google Map API. If you look at posted samples, ArcGIS layer is added on the Google map, not the opposite like the ArcGIS javascript API where Bing map is added to ESRI's map as a layer. However, using the Google map extension you can still do most of things that Javascript API can do. Plus somethings that Javascript API can not do like traffic, 3D etc (you can do streetview on any of the ESRI APIs through).

OP is not using the extension for google maps but the code posted here: http://www.arcgis.com/home/item.html?id=a84d64b0d1404366a02da714ca59d61f

Re: How to add google maps as a layer in Esri Javascript API??

HemingZhu — Fri, 18 Feb 2011 16:13:11 GMT

OP is not using the extension for google maps but the code posted here: http://www.arcgis.com/home/item.html?id=a84d64b0d1404366a02da714ca59d61f

nice to know. Thanks

Re: How to add google maps as a layer in Esri Javascript API??

NianweiLiu — Fri, 18 Feb 2011 17:02:17 GMT

There is a bug in dealing with initial visibility in the code. It's been fixed in the latest revision so you should be able to use it with initially visible. See: http://gmaps-utility-gis.googlecode.com/svn/tags/gmapslayer/1.0a/examples/gmapslayer.html

Re: How to add google maps as a layer in Esri Javascript API??

NickGramsky — Mon, 21 Feb 2011 00:42:00 GMT

There is a bug in dealing with initial visibility in the code. It's been fixed in the latest revision so you should be able to use it with initially visible. See: http://gmaps-utility-gis.googlecode.com/svn/tags/gmapslayer/1.0a/examples/gmapslayer.html

Did that with the visibility set but still no dice. It's like I cannot load a local gmapslayer.js or gmapslayer_compiled.js. Again, exact same code as example but google maps no worky if I use a local copy of gmapslayer.

Anyone else ever got a similar example to work as the example they have posted online?

Re: How to add google maps as a layer in Esri Javascript API??

NianweiLiu — Mon, 21 Feb 2011 16:38:08 GMT

Did that with the visibility set but still no dice. It's like I cannot load a local gmapslayer.js or gmapslayer_compiled.js. Again, exact same code as example but google maps no worky if I use a local copy of gmapslayer.

Anyone else ever got a similar example to work as the example they have posted online?

Check your web server (or ask your IT people to do it for you). It looks like your web server is not configed to serve js file.

Re: How to add google maps as a layer in Esri Javascript API??

NickGramsky — Tue, 31 May 2011 04:58:04 GMT

Meant to reply but never did 😞

I hadn't placed my files in the IIS home. I was accessing them via the browser (on the server) using the local path C:/GIS_Files/.... vice the IIS home. Once I moved this to the IIS home and accessed it through the inetpub/wwwroot dir through IIS everything worked.

Re: How to add google maps as a layer in Esri Javascript API??

JoeDING — Sat, 11 Jun 2011 02:16:49 GMT

Meant to reply but never did 😞

I hadn't placed my files in the IIS home. I was accessing them via the browser (on the server) using the local path C:/GIS_Files/.... vice the IIS home. Once I moved this to the IIS home and accessed it through the inetpub/wwwroot dir through IIS everything worked.

I did test,it work normal when from IIS site.

Re: How to add google maps as a layer in Esri Javascript API??

ShaningYu — Fri, 15 Jul 2011 20:33:36 GMT

I got the same problem. I also post it at
http://forums.arcgis.com/threads/34799-Google-Maps-Not-Display?highlight=google+maps
I checked my source code the gmapslayer_compiled.js was actually loaded. But the problem is still there. Have you found the solution yet? Thanks.