How to get linked panoId for google Photo Sphere? - google-maps

I'm having hard time to find linked panoId form a given Photo Sphere panoid.
If it is a google see insides i am getting the linked panoId by using this API
http://cbk0.google.com/cbk?output=xml&panoid=<PANO ID>
But in case of Photo Sphere this API is not returning the XML data. Can any one help me out with this problem.
see insides Pano ID = "enEZO0FuPFAAAAQvxYdP0w"
Photo Sphere Pano ID = "F:-fr8FidB2CSQ/V49sgVq8pHI/AAAAAAAABFw/bMktS2vh6mcQtQB6y1-vBXTPTZCCnxTbQCLIB"

The URL http://cbk0.google.com/cbk?output=xml&panoid=<PANO ID> is not documented feature, you should be aware that Google Maps API Terms of Service prohibits to access imagery using undocumented channels. See paragraph 10.1(a) of ToS:
No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).
https://developers.google.com/maps/terms#section_10_1
To access panorama data via service you should use API. For example, in Maps JavaScript API you can use StreetViewService class.
Code snippet
var panorama;
function initialize() {
var svService = new google.maps.StreetViewService();
var panoRequest = {
pano: "F:-fr8FidB2CSQ/V49sgVq8pHI/AAAAAAAABFw/bMktS2vh6mcQtQB6y1-vBXTPTZCCnxTbQCLIB"
};
svService.getPanorama(panoRequest, function(panoData, status){
if (status === google.maps.StreetViewStatus.OK) {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
pano: panoData.location.pano,
pov: {
heading: 10,
pitch: 10
}
});
console.log(panoData);
} else {
//Handle other statuses here
}
});
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
<div id="street-view"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initialize">
</script>
Exists also Street View Image Metadata web service, but currently it doesn't work with Photo Spheres.
There is a bug in the public issue tracker:
https://issuetracker.google.com/issues/35831151
However, Google didn't expose any ETA on when or if it might be fixed. You can star the public issue to add your vote.
UPDATE
Recently, Google enabled access to PhotoSpheres via Street View Image API. Although, the pano ID format has changed.
The F:-fr8FidB2CSQ/V49sgVq8pHI/AAAAAAAABFw/bMktS2vh6mcQtQB6y1-vBXTPTZCCnxTbQCLIB is now CAMSSi1mcjhGaWRCMkNTUS9WNDlzZ1ZxOHBISS9BQUFBQUFBQUJGdy9iTWt0UzJ2aDZtY1F0UUI2eTEtdkJYVFBUWkNDbnhUYlFDTElC
Please look at my answer for more details.

Related

Custom Google Maps Layer for Markers and Polygons?

I have a question about the googleMaps Javascript API. Is it possible to create a custom Layer that you can show/hide like the given layers such as traffic and bicycle layer?
I would like to have a own Layer for my Markers and another Layer for polygons.
thanks in advance
I understood of your question that you would like to create a custom layer on your web site. You also need to change the layer informations at any time.
Google maps api provides KML and GeoRSS data formats for "displaying geographic information".
We are going to introduce KML format.
You may create a KML file witch provides the informations for your layer. You can find an example of KML file here. Of course, you can edit this file any time on your server.
This is an example of editing a file on php:
$file = file_get_contents($_SERVER['DOCUMENT_ROOT']."/yourKLMFile.txt");
$file= str_replace("OldValue", "NewValue", $file);
echo ($file);
You also can provide personal data for your users or simply update your layer.
Next, JS.
Google maps api provides the KmlLayer() constructor witch creates your layers and display it on the map (since you have created it).
The constructor takes two important parameters:
The URL of your KML file (probably on your server);
The map in witch you want to display the layer.
This is a sample example:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
This is a sample code spinnet wich resume all this:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Remember that you can always update your data file in php.
You may consult the documentation about KML layer and generally google maps' layers on google maps web site.
Tell me a comment if you have some questions

Getting a Direct Image From Address With Google Street View Image API

I am using the static image API (where you pass a URL to Google and it returns an image). My issue is the images google is returning are sometimes not straight-on/clear view of the address. I am looking to get the same image as what the Google Maps search feature comes up with as a thumbnail.
I have read the Google Documentation for this API. An example URL is: https://maps.googleapis.com/maps/api/streetview?parameters&size=640x640&fov=50&location=4113+Hartford+Dr+Garland+TX
If I put this same address (4113 Hartford Dr, Garland, TX) directly into Google Maps, I get a much cleaner image.
I have experimented with changing the FOV value. My only other idea is to use heading, but I am unsure about this.
The end implementation is in Excel using VBA.
Let me know if you need any additional information.
You are going to have to compute the heading. I don't have the raw math for that, but here is an example using the JS API, if that's an option.
function getStreetView(lat, lng) {
let panorama = new google.maps.StreetViewPanorama(
document.getElementById('panorama'), {
position: {lat: lat, lng: lng}
})
let service = new google.maps.StreetViewService
service.getPanoramaByLocation(panorama.getPosition(), 50, function(panoData) {
if (panoData) {
let panoCenter = panoData.location.latLng
let heading = google.maps.geometry.spherical.computeHeading(panoCenter, {lat: lat, lng: lng})
let pov = panorama.getPov()
pov.heading = heading
panorama.setPov(pov)
} else {
alert('no streetview found')
}
})
map.setStreetView(panorama) // set dude on map
}

How to use Google to find current location, without asking for permission

I just did a Google search using: 'get current location' and I got this result:
It didn't ask me for my location, so I guess it's based on the IP location, or perhaps a cross reference of several information coming from my network (logged Google Accounts, Mobile devices, etc).
Is there a way to use Google Maps API, or any related Google service, to get this information, without having to ask the user for permission on the browser, to get their location?
Thank you
It's not a part of the Maps-API, but you may use the JSAPI(e.g. load the Maps-API via the JSAPI).
Although it isn't officially supported anymore, there still is(but must not be set) a property google.loader.ClientLocation
google.load("maps", "3",{callback:function() {
try{
opts={
center:new google.maps.LatLng( google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude),
zoom:8
};
}catch(e){alert('no location available');
opts={
center: new google.maps.LatLng(0,0),
zoom: 0
};
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
opts);
}
});
html,body,#map-canvas { height: 100%; margin: 0; padding: 0 }
<div id="map-canvas"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Of course it's only as accurate as IP-based geolocation may be...not much

Google Maps Custom Projection

I have created a custom Google Maps projection using the Google Maps Javascript API V2. It looks like this, as per the API specification:
function PProjection(levels) {
this.fromLatLngToPixel = function(latlng, zoom) {
...
};
this.fromPixelToLatLng = function(pixel, zoom) {
...
};
this.tileCheckRange = function(tile, zoom, tilesize) {
...
};
this.getWrapWidth = function(zoom) {
...
};
}
Previously, I had my version of the API set to 2.147 and everything worked fine. However, Google recently made the lowest version available 2.193. This new version breaks my projection. Whenever I try to add a marker, I get the following error in Firebug:
d.getNearestImage is not a function
According to this post a new method called
GProjection.getNearestImage(pixel,zoom,centrepixel)
was added in version 2.148, so it kind of makes sense that this problem would occur if I used a version of the API above 2.147. However, there is no note in the reference manual of an official change in the API. I added a dummy method of this name to my projection, but no luck. Any ideas on how to fix my projection or on how to revert to 2.147?
You can request a specific version through this method: http://groups-beta.google.com/group/google-maps-api/web/javascript-maps-api-versioning

overlay geotagged photo in Google Maps?

I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.