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

NickGramsky · ‎02-16-2011

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?

HemingZhu · ‎02-17-2011

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

BryanBaker · ‎02-17-2011

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

derekswingley1 · ‎02-17-2011

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

NickGramsky · ‎02-17-2011

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.

HemingZhu · ‎02-18-2011

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

derekswingley1 · ‎02-18-2011

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 · ‎02-18-2011

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

NianweiLiu · ‎02-18-2011

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

NickGramsky · ‎02-20-2011

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?