acwalker

Dynamic Layer will not display over Google base layer

Discussion created by acwalker on May 25, 2012
Latest reply on May 29, 2012 by nliu
I'm trying to display a Dynamic Map Service Layer over the Google streets map.  I have been following the 'Adding an ArcGIS Server map to Google Maps' found in this tutorial.  My dynamic service will not display.  It works in every other web-map I've built using FLEX or Javascript API, but it will not display over the Google base layer.  What am I missing?

Live map - A big red dot should appear near the center showing the point layer I'm trying to pull in but it's not visible.  That's the problem.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Google Maps + ArcGIS</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyDDlcIQ61bcnNSaLKNoBaD6u09Yq1WuUb8" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

    <!-- Required for dijits -->
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>

    <!-- Add ESRI Javascript API -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

    <!-- Add Jquery Library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



    <script type="text/javascript">

        // Add Dojo elements
    dojo.require("dijit.dijit");
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.TitlePane");
    dojo.require("esri.map");
    dojo.require("esri.virtualearth.VETiledLayer");    
    dojo.require("esri.dijit.BasemapGallery");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.SnappingManager");
    dojo.require("esri.dijit.Legend");
    dojo.require("dijit.form.CheckBox");
    dojo.require("esri.dijit.Measurement");
    dojo.require("esri.dijit.Scalebar");
    dojo.require("esri.tasks.query");
    dojo.require("esri.dijit.Popup");

    var map;
    var gmap = null;
    

    function init_google() {
      //Load Google Maps
      gmap = new GMap2(document.getElementById("gmap"));
      var centerat = new GLatLng(28, -82.5);

      gmap.addControl(new GLargeMapControl());
      gmap.addControl(new GMapTypeControl());
      gmap.setCenter(centerat, 10);
      gmap.enableScrollWheelZoom();

      var dynamicMap = new esri.arcgis.gmaps.DynamicMapServiceLayer
        ("http://map.entrix.com/ArcGIS/rest/services/Misc/RiverviewOfficePointsWGS84/MapServer",
        null, 1.0, function(overlay) {gmap.addOverlay(dynamicMap);}
      );
    }


  </script>

  </head>
  <body onload="init_google();" onunload="GUnload();">
    <div id="gmap" style="width: 500px; height:500px;"></div>
  </body>
</html>

Outcomes