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" /> <!--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>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 });
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);
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; }