shaningesri

Google Maps - Add a Dynamic Map but Not a Tiled Map.

Discussion created by shaningesri on Jul 18, 2011
Latest reply on Jul 18, 2011 by stevel
I revised ESRI's cript in order to add both ESRI dynamic and tiled maps over Google's Maps.  It works for add the dynamic one but not the tiled one.  I run it locally.  The code is below.  You can copy, paste and then save it as a htm file, and then run it locally.  If you can try and find out the problem, I will appreciate. 


<!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>Add DynamicMapServiceLayer to GMap</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

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

    <script type="text/javascript">
    var flag = 0;
    var gmap = null;
    var dynamicMap = null;
    //var gmapOptions;

    // For ESRI Tiled Map
    var mapExtension;
    var gOverlays = null;


    function initialize() {
      //gmapOptions = {
      //  mapTypes: [G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP]
      //}


      //Load Google Maps
      //gmap = new GMap2(document.getElementById("map"),gmapOptions);

      gmap = new GMap2(document.getElementById("gmap"));
      var centerat = new GLatLng(0, 0);

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

      //create mapextension class to be used to add/remove results from the map.
      mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);
      var mapOptions = null;
      var gOverlays = null;

    }

    function addDynamicMap() {
      //create custom dynamic layer
      //esri.arcgis.gmaps.DynamicMapServiceLayer(url,esri.arcgis.gmaps.ImageParameters?,opacity?,callback?);
      dynamicMap = new esri.arcgis.gmaps.DynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", null, 0.75, null);

      if (flag == 0) {     

       GEvent.addListener(dynamicMap, "load", function(groundov) {
         gmap.addOverlay(groundov);
       });
       flag = 1;
        } else {
      }

      //document.getElementById(???addButton???).disabled=true;
    }


    function addTiledMap() {

      //create mapOptions to specify opacity, minResolution, maxResolution when adding to the map.
      mapOptions = {opacity: 0.75, minResolution:0, maxResolution: 19};


      if (flag == 0) {     

        //create custom tile layer
        tiledmap = new esri.arcgis.gmaps.TiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer", mapOptions, addTiledMap);

       flag = 1;
      } else {
      }

      //document.getElementById(???addButton???).disabled=true;
    }

    function addTiledMap(gTileLayer) {
      //Add tile layer as a GTileLayerOverlay using mapExtension
      gOverlays = mapExtension.addToMap(gTileLayer);
    }



    function showMap() {
      dynamicMap.show();
      if (flag == 2) {
  dynamicMap.show();
// esriTiledMap_Street.show();
flag = 1;
      }
    }

    function hideMap() {
      if (flag == 1) {
  dynamicMap.hide();
//esriTiledMap_Street.hide();
flag = 2;
      }
    }

    function removeMap() {
gmap.removeOverlay(dynamicMap);
// gmap.removeoverlay(esriTiledMap_Street);
        flag = 0;

    }

  </script>

  </head>

<form>
            <b>ESRI Maps:  </b>
              <input type="button" id="äddButton"value="Add Dynamic Map" onclick="addDynamicMap();" /> 
              <input type="button" id="äddButton"value="Add Tiled Map" onclick="addDTiledMap();" /> 
              <input type="button" value="Hide" onclick="hideMap();" /> 
              <input type="button" value="Show" onclick="showMap();" /> 
              <input type="button" value="Remove" onclick="removeMap();" />
  
</form>

  <body onload="initialize();" onunload="GUnload();">
<div id="gmap" style="width: 100%; height: 800px; float:left; "></div>
  </body>
</html>

Outcomes