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?

NianweiLiu · ‎02-21-2011

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 · ‎05-30-2011

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.

JoeDING · ‎06-10-2011

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.

ShaningYu · ‎07-15-2011

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.