ngramsky

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

Discussion created by ngramsky on Feb 16, 2011
Latest reply on Jul 15, 2011 by shaningesri
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" />
    <!--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>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?

Outcomes