Google Maps Embed API Panorama ID - google-maps

The URL for previous implementations of photosphere panoramas contained the pano ID, making it easy to embed a specific panorama in an iframe. I can't seem to track down ID in the new Google Maps. Is there any method of identifying the ID for a photosphere without resorting to Javascript?

I can find the ID two times. Here is an example:
www.google.de/maps/place/Magdeburg/#52.1285424,11.6312738,3a,75y,98h,90t/data=!3m8!1e1!3m6!1s_k_6ZCbrOuYAAAQo8TPM1w!2e0!3e2!6s%2F%2Fgeo3.ggpht.com%2Fcbk%3Fpanoid%3D_k_6ZCbrOuYAAAQo8TPM1w%26output%3Dthumbnail%26cb_client%3Dmaps_sv.tactile.gps%26thumb%3D2%26w%3D203%26h%3D100%26yaw%3D98.389519%26pitch%3D0!7i13312!8i6656!4m2!3m1!1s0x47a5f5ff55daea5b:0x4236659f8071060!6m1!1e1
I got the URL by clicking hte yellow guy (at hte bottom right) once and click one of the orange panorama spots

You can take help of chrome or other browser DOM inspect tools.
Open your photosphere link/url in chrome.
You will see gallery of thumbnails at bottom, your panorama will be one of them with the 360 icon
Right click on that thumbnail and click "inspect", and the dom inspector will open
Keep expanding the DOM tree untill you reach this DIV with class="widget-runway-card-background-flicker-hack-wrapper"
You will see an image element inside, copy its image url. This is same as the photosphere thumbnail you are viewing in the gallery
The url will be one of the following format (these are dummy)
Case A:
https://lh4.googleusercontent.com/-HXKCf8vxJ-s/Ve_c7LX8HyI/XXXXXAAxtg/J4tLscU2d6g/w203-h101-n-k-no/
Case B:
https://geo0.ggpht.com/cbk?cb_client=maps_sv.tactile&authuser=0&hl=nl&output=thumbnail&thumb=2&w=200&h=150&pitch=0&ll=55.2399803333%2C1.851848888888867&panoid=FEpIAbSgOzoAAAQJOQCL3w&yaw=123
For Case A: Add "F:" to the bold string and you will have the final panoID, i.e
F:-HXKCf8vxJ-s/Ve_c7LX8HyI/XXXXXAAxtg/J4tLscU2d6g
For Case B it is very obvious, FEpIAbSgOzoAAAQJOQCL3w.

Run the following from the console of developer tools while viewing the pano on Google Maps
"F:".concat(window.location.href.split("!1s")[1].split("!2e")[0]).replace('%2F','/')

Related

HTML - Image over another image which triggers a popup window

I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!

Inserting an iframe or Dynamic content into an info window?

I have a google map which is hooked up to a fusion table. Its pretty basic, lists street address, phone, and branch #.
I recently got a request though to add current weather to the info window that appears when a user clicks on a map marker.
Initially I thought I could just iframe this in, but it appears that google strips that HTML out of the info window when I add it in. I guess only basic html is allowed.
Does anyone know a way to throw dynamic content into that info window box or a way to get around google stripping out the iframe code?
The only iFrames I can get to work in fusion table map windows or cards are youtube embeds. Other iframes appear to get srtipped out as you say. It would be a good feature to be able to have universal iframe content instead of just google products.

Google Chrome Extension Top Sites Images

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?
Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.
It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

Logo not displaying on Multiple Google Maps

I have page that displays multiple Google Maps on one page. On the maps I have my logo in the top left. I have noticed it only displays on the first map. I have an idea why but I am not sure what I need to add for it to display on the other. It inherits all the other map controls so I not sure why it doesn't do this for the logo on both maps.
Here is a link to the page
EXAMPLE
Here is the link to the code for the map
CODE
Any suggestions?
-Thanks
Looks to me like you are only adding it to "map":
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
if you want it on map1, you need to add it to there as well:
map1.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
(you might need to make another copy for map1)

Take a picture from google streetview

Is it possible to embed streetview for an address. Then user will move around in streetview with zoom, pan etc and finally can we provide user a button which will capture the image and send to an application. Alternatively, if it is not possible to use the button and capture an image of what the user sees then, we can we take a streetview link from the user like this one and then can we get the image on php similar to what is shown in flash?
The whole idea is to be able to get what user sees on streetview as an image to the server.
Have a look at StreetView.py This python script parses all panorama information.
yes,you can use iecapt.exe which will capture a particular div area.
you can check on the following link
capturing webpage using iecapt