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

ShaningYu · ‎07-18-2011

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/MapSer...", 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/MapSer...", 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>

StephenLead · ‎07-18-2011

Shaning,

This might be related to your other Google Maps question.

As far as I can see, the Google Maps tiled backgrounds do not work when you're running the code locally - something to do with their API not allowing intranet usage, perhaps.

Try copying your files to an externally-facing web server and running the code there, to see if that helps.

Steve