Displaying Google Street view in a popup window.

FredHejazi · ‎10-09-2012

I am attempting to display Google street view in conjunction with a map. To start this process, I copied one of the ESRI samples and modified it a bit. At this point, the first time I click into the map, the popup displays the Streetview. However, on subsequent clicks, it shows the window with the streetview controls, but no content. Right now I have Streetview set for a static location. Once I get it working, I intend to make the location dynamic.

Here is the code. Its a little sloppy, as I have been working on it for a couple of days and it still contains some of the code for the original ESRI example. Any help would be greatly appreciated.

<!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>Info Window with Chart</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <style>
      html, body {
        height: 80%;
        width: 80%;
        margin: 0;
        padding: 0;
      }
      #map {
        padding:0;
      }
      .chart {
        width:400px;
        height:400px;
        padding:0px !important;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dojo.number");
      dojo.require("dijit.layout.TabContainer");

      var map;
      //try other themes (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms)
      var theme = 'Wetland';
      dojo.require("dojox.charting.themes." + theme);

      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -13971902,
          "ymin": 4681009,
          "xmax": -11276427,
          "ymax": 6102127,
          "spatialReference": {
            "wkid": 102100
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });

        //Add the world imagery to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);

        var template = new esri.InfoTemplate();
        //flag icons are from http://twitter.com/thefella, released under creative commons
        template.setTitle("<b><img src='images/flags/${STATE_ABBR}.png'/> ${STATE_NAME}</b>");
        template.setContent(getWindowContent);

        var statesLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate: template,
          outFields: ["*"]
        });
        var symbol = new esri.symbol.SimpleFillSymbol();
        statesLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));

        map.addLayer(statesLayer);
        map.infoWindow.resize(320, 320);

        dojo.connect(map, 'onLoad', function (theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
      }

      function getWindowContent(graphic) {
        //make a tab container
        var tc = new dijit.layout.ContentPane({
          style: "width:100%;height:100%;"
        }, dojo.create("div"));

        //display attribute information

//       var chart = new Mstreeview(tc.domNode) //dojo.byId("streetv"));//new dojox.charting.Chart2D(c);

        var fenway = new google.maps.LatLng(42.345573,-71.098326);
        var panoramaOptions = {
          position: fenway,
          navigationControl: true,
          enableCloseButton: false,
          addressControl: false,
          linksControl: true,
          visible: true,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
       var panorama = new google.maps.StreetViewPanorama(tc.domNode,panoramaOptions);
       panorama.setVisible(true);

         return tc.domNode;
      }

      dojo.addOnLoad(init);
    </script>
</head>

<body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"></div>
    </div>
</body>

</html>

PeterMatst · ‎10-12-2012

yes it is too much coding 😞

look at this it is using embed code google streat view