Getting a Direct Image From Address With Google Street View Image API - google-maps

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
}

Related

How to get linked panoId for google Photo Sphere?

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.

Google maps symbol with embeded text

I want to create symbols with text on google maps as shown in the following map where roads are marked with their names e.g. M1.
google maps example
Also the text is not predefined so I cannot use stored icons with the appropriate text.
Any ideas on how google creates these symbols?
A good idea here is to write a server side process in your backend's language to render this dynamic image.
For PHP there is: PHP GD
Perl(My Current backend) has a number of module for drawing images.
I'm sure whatever your backend is it has some.
Anyway you can write some code that given some GET variables will return an image drawn using them.
Then you just need a small function to build the url:
function getImage(text,color) {
return "example.com/draw/icon.php?text="+text+"&color="+color;
}
This will call your serverside file which can return the image with the correct headers.
You'll need to employ some form of caching to generate these probably on the server side and the client side depending on your apps load.
So you want to add place names? You can create custom icons or labels, are you using the API or My Maps?
This may help if you're using My Maps:
https://support.google.com/mymaps/answer/3024931?hl=en
otherwise if you're using the API then try this:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
https://developers.google.com/maps/tutorials/customizing/custom-markers

Google Maps suggests bad direction

I am currently working with the Google Maps API to render directions.
From the technical side everything works fine:
var $canvas = $element.querySelector('#map-canvas');
vvar map = new maps.Map($canvas, {
center: new maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: maps.MapTypeId.ROADMAP,
zoom: 14
});
var route = {
travelMode: google.maps.TravelMode.BICYCLING,
origin: new google.maps.LatLng(52.455833, 13.322948),
destination: new google.maps.LatLng(52.459281, 13.356367),
};
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer();
display.setMap(map);
display.setDirections(body);
});
Unfortunately the suggested route is absolutely crap. Instead of going directly from A to B it even leaves the city...
Why does this work good with maps.google.com but not with the API? What do I have to change so I get a correct result?
Bodo
The origin is placed on a train station, it seems the DirectionsService suggests to put the car on a train, because there is a vehicle Shipping available.
Google-Maps doesn't use the exact origin, it seems that it geocodes the LatLng and takes the result with type "street_address"(it's Berlinickestraße 16A, 12165 Berlin, Deutschland) as origin.
You may do the same(geocode the LatLng's first and use the results with a type of street_address as origin and destination)

How to have physical location using google map api

I am relatively new to web development. I am trying to extract a physical location from the longitude and latitude using google map (i think google.map would be right for this). I have already written this code in JADE which gives me lat and long. How can i use this value to see the exact physical location. Thanks !
if (navigator.geolocation) {
console.log('Geolocation is supported!');
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
jQuery("#location_latitude").append(startPos.coords.latitude);
jQuery("#location_longitude").append(startPos.coords.longitude);
console.log(startPos.coords.latitude);
console.log(startPos.coords.longitude);
});
}
A am sure you will find solution looking in the source:
http://html5demos.com/geo
You have to create the map and then locate a marker on it.

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.