nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

NickGramsky

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?

Find more posts tagged with

Accepted answers

All comments

ShaningYu

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.

JoeDING

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.

NickGramsky

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.

NianweiLiu

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.

NickGramsky

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?

NianweiLiu

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

HemingZhu

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

derekswingley1

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

HemingZhu

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).

NickGramsky

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.

derekswingley1

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

BryanBaker

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');

HemingZhu

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.