I am running a queryTask in order to select dynamicMapServiceLayers on my map. I am able to get a popup window for my polygon features (campus buildings) but cannot seem to get the Bus Stop layers to return anything. I looked to reconfigure the point layer itself but did not find any results on here or arcGIS online. I've looked at a ton of sample code and haven't yet seen anything that changes anything specific about point features. Is there something I am missing to return a popup window for my point features(Bus Stops)?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--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>Updating the legend to display visible layers</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
dojo.require("esri.tasks.query");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.find");
dojo.require("");
var map, queryTask, query;
var symbol, markerSymbol, infoTemplate;
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/dom-construct",
"dojo/parser",
"dojo/_base/array",
"dijit/form/CheckBox",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,
parser, arrayUtils, CheckBox
) {
parser.parse();
var legendLayers = [];
map = new Map("map", {
basemap: "topo",
center: [-80.556, 37.1367],
zoom: 16
});
var buildingLayer = new ArcGISDynamicMapServiceLayer("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer", {
id: 'ruRestServices'
});
legendLayers.push({ layer: buildingLayer, title: 'RU Rest Services' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
map.addLayers([ buildingLayer ]);
map.on('layers-add-result', function () {
//add check boxes
arrayUtils.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible
});
checkBox.on("change", function () {
var targetLayer = map.getLayer(this.value);
targetLayer.setVisibility(!targetLayer.visible);
this.checked = targetLayer.visible;
});
//add the check box and label to the toc
domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
var checkLabel = domConstruct.create('label', {
'for': checkBox.name,
innerHTML: layerName
}, checkBox.domNode, "after");
domConstruct.place("<br />", checkLabel, "after");
});
});
dojo.connect(map, "onClick", executeQueryTask);
queryTask = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/6");
queryTask2 = new esri.tasks.QueryTask("http://geog-grant.radford.edu/arcgiscloud/rest/services/RU/MapServer/4");
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["BLDGNAME", "OBJECTID", "NAME", "SHAPE_AREA" ];
query2 = new esri.tasks.Query();
query.returnGeometry = true;
query2.outFields = ["OBJECTID"];
infoTemplate = new esri.InfoTemplate("${BLDGNAME}", "Object ID: ${OBJECTID}<br />Name: ${Name}");
infoTemplate2 = new esri.InfoTemplate("${OBJECTID}", "Object ID: ${OBJECTID}" );
markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
});
function executeQueryTask(evt) {
query.geometry = evt.mapPoint;
queryTask.execute(query, showResults);
}
function executeQueryTask2(evt) {
query2.geometry = evt.mapPoint;
queryTask2.execute(query2, showResults2);
}
function showResults(featureSet) {
map.graphics.clear();
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
switch (graphic.geometry.type){
case "point":
graphic.setSymbol(markerSymbol);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
break;
}
// graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
graphic.setInfoTemplate(infoTemplate2);
map.graphics.add(graphic);
});
}
</script>
</head>
<body class="claro">
Click on a Radford University Building to get more info. When Building is highlighted, click building again to get info window.
<!--[if IE 7]>
<style>
html, body {
margin: 0;
}
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'RU Layers'">
<span style="padding:10px 0;">Click to toggle the RU Rest API Service Layers</span>
<div id="toggle" style="padding: 2px 2px;"></div>
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
</body>
</html>
Any help is appreciated.
There is more than one error in your code.
The most important is that when querying a point layer you should build an Extent as a filter geometry, and not a point. That extent must contain the point you're querying. Here are the fixes:
//dojo.connect(map, "onClick", executeQueryTask); WRONG
dojo.connect(map, "onClick", executeQueryTask2);
.....
query2 = new esri.tasks.Query();
//query.returnGeometry = true; WRONG
query2.returnGeometry = true;
query2.outFields = ["OBJECTID"];
.....
function executeQueryTask(evt) {
// clear goes here so that it clears only before first query
map.graphics.clear();
query.geometry = evt.mapPoint;
queryTask.execute(query, showResults);
}
function executeQueryTask2(evt) {
// query2.geometry = evt.mapPoint; WRONG
var ext = new esri.geometry.Extent(evt.mapPoint.x - 50, evt.mapPoint.y - 50 , evt.mapPoint.x + 50, evt.mapPoint.y + 50, evt.mapPoint.spatialReference)
query2.geometry = ext;
queryTask2.execute(query2, showResults);
}
function showResults(featureSet) {
dojo.forEach(featureSet.features,function(feature){
var graphic = feature;
switch (graphic.geometry.type){
case "point":
graphic.setSymbol(markerSymbol);
// set info template for points
graphic.setInfoTemplate(infoTemplate2);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
// set info template for polygons
graphic.setInfoTemplate(infoTemplate);
break;
}
map.graphics.add(graphic);
});
}
Related
I have a simple 2d map in open layer (5.2.0) that is comming from this url: https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer. When I switch to ol-cesium, the map is not display anymore, I only see a black circle (the earth). Here is the code:
It works fine with OpenStreetMap, the problem is when i try to use the map from arcgisonline.com
<!doctype html>
<html lang="en">
<head>
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<link type="text/css" rel="stylesheet" href="/csiaps/webjars/openlayers/5.2.0/ol.css" />
<link type="text/css" rel="stylesheet" href="/csiaps/js/olcesium/olcs.css" />
<script type="text/javascript" src="/csiaps/webjars/openlayers/5.2.0/ol.js"></script>
<script type="text/javascript" src="/csiaps/js/cesium/Build/CesiumUnminified/Cesium.js"></script>
<script type="text/javascript" src="/csiaps/js/olcesium/olcesium.js"></script>
<script>
var ol3d = null;
var baseLayerGroup;
function createArcGISCacheLayer(name, url, layerInfoParam) {
name = 'NatGeo_World_Map';
url = 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer';
layerInfoParam = <NEVER MIND, not include for this post>;
var wrapDateLineOption = true;
var layer = new ol.layer.Image({
visible : true,
source : new ol.source.ImageArcGISRest({
url : url,
params : {
"layerInfo" : layerInfoParam,
"wrapDateLine" : wrapDateLineOption
}
})
});
layer.set('title', name);
return layer;
}
</script>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layer = createArcGISCacheLayer(null, null, null);
var map = new ol.Map({
target : 'map',
layers : [ layer ],
view : new ol.View({
center : ol.proj.fromLonLat([ 37.41, 8.82 ]),
zoom : 4
})
});
function showHideMap() {
if (!ol3d || !ol3d.getEnabled()){
ol3d = new olcs.OLCesium({
map : map,
});
}
ol3d.setEnabled(!ol3d.getEnabled());
}
</script>
3d
</body>
</html>
I expect the ol-celium to format the already loaded 2d maps in 3d and show them instead of a black map
It's a tile layer
var layer = new ol.layer.Tile({
source: new ol.source.TileArcGISRest({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer'
})
});
Since it's EPSG:3857 and uses a standard grid it will also work set as an XYZ source and will be quicker to open (note the x and y are reversed compared with most XYZ sources)
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}'
})
});
So I'm fairly new to not only HTML but also working with API's. I've been working on implementing the Maps Javascript API, specifically the Places Autocomplete and Directions functionality.
Prior to this I simply initialized the map and it loaded properly every single time, but the moment I tried to (for testing purposes) implement the more complicated Places & Direction functionality it stopped initializing.
I browsed several forums and couldn't seem to find a solution to this problem. If anyone could point out a potential issue within the code I would be grateful!
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<!-- GMAIL CLIENT KEY: 462218843122-16riskqb5201tfaeh51nrjqo3bec7h1c.apps.googleusercontent.com -->
<!-- link to main stylesheet -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
Home
Sign In
Register
</div>
<!--
<div class="about">
<a>About</a><br />
<a>We use the Firebase API to create and manage user accounts.</a><br /><br />
<a>The user selects two travel points as displayed with the Google Maps API.</a><br /><br />
<a>We poll United/Uber/Amtrack APIs for the available travel options.</a><br /><br />
<a>We then email the user when a trip is available</a>
</div>
-->
<div class="destInt">
<a>Enter your Trip</a>
</div>
<div id="forms" style="position:absolute; top:30; left:0; height:50%; width: 50%">
<form>
<div id="mode-selector" class="controls">
<input type="radio" name="type" id="changemode-walking" checked="checked">
<label for="changemode-walking">Walking</label>
<input type="radio" name="type" id="changemode-transit">
<label for="changemode-transit">Transit</label>
<input type="radio" name="type" id="changemode-driving">
<label for="changemode-driving">Driving</label>
</div>
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location"><br>
<input id="destination-input" class="controls" type="text"
placeholder="Enter a destination">
</form>
</div>
<!-- Map -->
<div id="map" style="position:absolute; top:35; right:0; height: 400px; width: 48%; margin-right: 12px"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 30.615, lng: -96.342},
zoom: 13
});
new AutocompleteDirectionsHandler(map);
}
/**
* #constructor
*/
function AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.travelMode = 'WALKING';
var originInput = document.getElementById('origin-input');
var destinationInput = document.getElementById('destination-input');
var modeSelector = document.getElementById('mode-selector');
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.directionsDisplay.setMap(map);
var originAutocomplete = new google.maps.places.Autocomplete(
originInput, {placeIdOnly: true});
var destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, {placeIdOnly: true});
this.setupClickListener('changemode-walking', 'WALKING');
this.setupClickListener('changemode-transit', 'TRANSIT');
this.setupClickListener('changemode-driving', 'DRIVING');
this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
var geocoder = new google.maps.geocoder;
var service = new google.maps.DistanceMatrixService;
})
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
var radioButton = document.getElementById(id);
var me = this;
radioButton.addEventListener('click', function() {
me.travelMode = mode;
me.route();
});
};
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("Please select an option from the dropdown list.");
return;
}
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else {
me.destinationPlaceId = place.place_id;
}
me.route();
});
};
AutocompleteDirectionsHandler.prototype.route = function() {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
this.directionsService.route({
origin: {'placeId': this.originPlaceId},
destination: {'placeId': this.destinationPlaceId},
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY API KEY&libraries=places&callback=initMap">
</script>
<!-- End of Map -->
</body>
</html>
Your issue seems to be these lines:
// these lines are invalid
var geocoder = new google.maps.geocoder;
var service = new google.maps.DistanceMatrixService;
}) // this is not tied to anything
You have some extra brackets. You also have a couple lines of invalid code. If you want to invoke those constructors you need to call them ()
If I were to search for a textual address (Let's say the address is "305 Quincy St NE"), how would I go about doing it in ArcGIS using the ArcGIS API for Javascript?
My aim is to call a function which has the geometry of a place passed as its function argument.
function showLocation(evt) {
map.graphics.clear();
var point = evt.result.feature.geometry; // how do I get this value from a textual address?
.
.
.
}
Use the Locator class. Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Using Locator to Find Address</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.14/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 75px;
}
</style>
<script src="https://js.arcgis.com/3.14/"></script>
<script>
var map;
var locator;
var symbol;
var locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/Color", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"dijit/form/TextBox", "dijit/registry", "dojo/on", "dojo/parser",
"dojo/keys",
"dojo/domReady!"
], function(
Map, Locator, Graphic,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
TextBox, registry, on, parser,
keys
) {
map = new Map("map",{
basemap: "topo",
center: [-117.19, 34.05],
zoom: 13
});
locator = new Locator(locatorUrl);
symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
20,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
Color.fromHex("#EEAA00"),
3),
Color.fromHex("#002255")
);
parser.parse();
var box = registry.byId("textBox_address");
on(box, "keypress", function (evt) {
if (keys.ENTER == evt.keyCode) {
var addressText = box.get("value");
//This is the important part. Call Locator.addressToLocations.
locator.addressToLocations({
address: {
SingleLine: addressText
}
}, function (addresses) {
//Success
if (0 == addresses.length) {
alert("Address not found");
} else {
var address = addresses[0];
var pt = address.location;
map.graphics.clear();
map.graphics.add(new Graphic(pt, symbol));
map.centerAt(pt);
}
}, function (error) {
//Failure
alert("Error: " + error);
});
}
});
});
</script>
</head>
<body>
<div id="search">
<label for="firstname" style="background-color: white">Address:</label>
<input type="text" name="textBox_address" value="808 Travis St, Houston TX"
data-dojo-type="dijit/form/TextBox" id="textBox_address" />
</div>
<div id="map"></div>
</body>
</html>
var address = "305 Quincy St NE";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var longitude= results[0].geometry.location.lat();
var latitude = results[0].geometry.location.lng();
}
});
Regarding to Hiren's answer,
THe problem is not with the latitude and longitude, the problem is that you can not use Google Geocoder with any other technology different than Google Maps:
The Geocoding API may only be used in conjunction with a Google map;
geocoding results without displaying them on a map is prohibited. For
complete details on allowed usage, consult the Maps API Terms of
Service License Restrictions.
You can check it here:
https://developers.google.com/maps/documentation/geocoding/intro
Cheers!
Hi still learning dojo,
with code:
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<!-- load Dojo -->
<script src="/static/1.9.3/dojo/dojo.js"
data-dojo-config="async: true"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
var map;
var osm;
var currentPoint;
require([
'dojox/geo/openlayers/Map',
'dojox/geo/openlayers/Layer',
'dojox/geo/openlayers/GfxLayer',
'dojox/geo/openlayers/WidgetFeature',
'dojox/geo/openlayers/Point',
'dojox/geo/openlayers/GeometryFeature',
'dojo/dom',
'dojo/parser',
'wink/api/geolocation/js/geolocation',
'dijit/form/RadioButton',
'dojo/domReady!'
], function (Map, Layer, GfxLayer, WidgetFeature, Point, GeometryFeature, dom,parser,GeoLocation){
// Create the map using the specified // DOM element
map = new Map("rcp1_map");
// Create an OpenStreeMap raster layer // and add to the map
osm = new GfxLayer();
map.addLayer(osm);
var mapobj = map.getOLMap();
mapobj.addControl(new OpenLayers.Control.LayerSwitcher());
mapobj.addControl(new OpenLayers.Control.PanZoomBar());
map.fitTo([ -40, 20, 40, -20 ]);
parser.parse();
currentPoint = new Point({
x : 0,
y : 0
});
var f = new GeometryFeature(currentPoint);
f.setStroke([ 0, 0, 0 ]);
f.setFill([ 255,0, 0]);
f.setShapeProperties({
r : 5
});
osm.addFeature(f);
osm.redraw();
var winkgeo = new GeoLocation();
console.log(winkgeo);
winkgeo.addListener({method: "winkgeoalert"},
1000,
false,
true
);//winkgeo.addListener
}//require function
); //require
function winkgeoalert(geo){
currentPoint.setPoint({
x:geo.longitude,
y:geo.latitude
});
//map.fitTo({position:[geo.longitude, geo.latitude]});
var mapobj = map.getOLMap();
console.log('mapobj: '+mapobj);
console.log(geo.longitude);
console.log(new OpenLayers.LonLat(geo.longitude,geo.latitude));
console.log(mapobj.getCenter());
mapobj.panTo(new OpenLayers.LonLat(geo.longitude,geo.latitude));
osm.redraw();
}
function layerType(id){
require([
'dojo/dom'
],function(dom){
var i = dom.byId(id);
var v = i.value;
alert(v);
map.setBaseLayerType(v);
}//require function
);//require
};//layerType
</script>
</head>
<body>
<input type="radio" data-dojo-type="dijit/form/RadioButton" id="osm" name="layertype" value="OSM" onClick="layerType('osm')" />
<input type="radio" checked data-dojo-type="dijit/form/RadioButton" id="arcgis" name="layertype" value="ArcGIS" onClick="layerType('arcgis')" />
<div id="rcp1_map" style="width: 100%; height: 100%;"></div>
</body>
</html>
mapobj.panTo(new OpenLayers.LonLat(geo.longitude,geo.latitude)); --> the OpenLayers library method does not react as expected?
did dojo do something dumb to the coord system?
is there another way to inject OpenLayers command thru dojo's wrapping?
Arthur.
update: went in to dojo source. problem: different geo projection system problem! FIDED!
This is a working example of Street View API V3:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Events</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
var cafe = new google.maps.LatLng(37.869085,-122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0,
zoom: 1
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement("tr");
linksTable.appendChild(row);
var labelCell = document.createElement("td");
labelCell.innerHTML = "<b>Link: " + i + "</b>";
var valueCell = document.createElement("td");
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 425px; height: 240px;float:left"></div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table">
</table>
</table>
</div>
</body>
</html>
I've been searching all day on how to parse a google maps street view url into a google maps street view embed javascript, but I dont seem to find a solution anywhere, need to parse something like this: http://maps.google.com/?ll=37.588929,-87.337506&spn=1.201384,1.766052&t=m&z=9&layer=c&cbll=37.588929,-87.337506&panoid=C0tiQOjXuQtNmZRPkHbVxw&cbp=12,154.39,,0,-4.06
There's this querystring library: https://github.com/visionmedia/node-querystring. Works in node.js and in the browser.
pano position=37.588929,-87.337506 the "ll="
Looks like "cbp=" will give you heading, pitch and zoom
http://www.geocodezip.com/v3_GoogleEx_streetview-simpleA.htm
See this page on mapki.com for their meaning.
UPDATE (the mapki.com seems to be gone):
According to this site:
The 5 parts of "cbp=" are window size, heading (bearing), tilt, zoom, and pitch (in that order).