PanoWalks

How to generate and set a Google Street View JavaScript API key

2018-05-29T14:56:14-07:00

Warning: You need to be logged into your Google account to generate a key for Google Maps Javascript API.

Before you can set this browser key in your Tour Manager, you’ll need to generate it. This tutorial will show you how to do that.

Generate a new API key
View your existing API keys
Secure your existing API keys
Add API key to the Tour Manager

Generate a new API key

If you do not have a Maps JavaScript API key or need to create a new one, please follow the steps below. If you already have a Maps JavaScript API key, you can add it to the plugin with the steps here.

Go to the Google Maps Platform
Click ‘Get Started’
Check ‘Maps’, and ‘Places’
Click ‘Continue’
If you want to use an existing project, please select it from the list. Otherwise, select ‘Create a new project’ and enter a project name.
Click ‘Next’ to continue
Click ‘Next’ to enable the APIs for the project
Copy the generated API key from the popup, you’ll need this to set your key later.

View your existing API keys

Go to the Google Maps Platform
If the side menu is not visible, click the three line (hamburger) menu icon
Click ‘APIs & Services’ (API icon)
Click ‘ Credentials’ (key icon)

Secure your existing API keys

To prevent quota theft, secure your API key following these best practices.

Restrict your API keys to be used by only the IP addresses, referrer URLs, and mobile apps that need them: By restricting the IP addresses, referrer URLs, and mobile apps that can use each key, you can reduce the impact of a compromised API key. You can specify the hosts and apps that can use each key from the GCP Console Credentials page and then create a new API key with the settings you want, or edit the settings of an existing API key.
Restrict your API keys to be usable only for certain APIs: If you have multiple APIs enabled in your project and your API key should only be used with some of them, restrict usage of that key to those APIs. You can specify the allowed APIs for each key from the GCP Console Credentials page and then create a new API key with the settings you want, or edit the settings of an existing API key.
Delete unneeded API keys: To minimize your exposure to attack, delete any API keys that you no longer need.
Regenerate your API keys periodically: You can regenerate API keys from the GCP Console Credentials page by clicking Regenerate key for each key. Then, update your applications to use the newly-generated keys. Your old keys will continue to work for 24 hours after you generate replacement keys.

We use the following APIs:

Street View API
Maps JavaScript API
Places Api

Add API key in your Tour Manager

Copy the API key you created from the Google Maps Platform.
Log in to your PanoWalks account. When you’re logged in, open your tour manager.
Click on ‘Settings’.
Paste the API key you copied in step 1 into the ‘Google Maps API key’ field.
Click Save Changes.

If you have trouble displaying Google maps on your site, please verify that the Google Maps Javascript API is enabled in the Google Maps API Manager.

Copy and Paste URL from Google Maps

2015-12-03T13:58:56-07:00

Quick and Dirty Nadir Patch

2015-09-09T12:27:52-07:00

There are several possibilities to cover the black hole or tripod area at the bottom of your panorama after stitching. You can easily create a round disk in Adobe Photoshop that looks like a mirror ball and even add text or a logo. Another possibility is to remove the tripod when shooting your panorama and take an image of the nadir that you can later include when stitching in PTGui. This will however take considerable extra time and I will show you a quick and dirty method to achieve almost the same result in much less time.

An important tool and Swiss Army knife for every PanoWalker is KRPano Tools. This article shows how you can patch your nadir (Black hole or tripod area at the bottom) in a few seconds using KRPanoTools and Adobe Photoshop.

This method will work better if there is no significant pattern in your nadir area. So if you have a chance to move your tripod slightly to a more suitable spot it will make life a lot easier for you.

Here is an example image after stitching with PTGui which we will try to patch.

Download KRPano Tolls and unzip the archive to your Computer to a location of you choice.

Open the KRPano Folder and also open the folder with your spherical Image. Drop your spherical image onto the KRPano SPHEREtoCUBE Droplet.

Open the down view cube image with Adobe Photoshop and select the Patch Tool and draw a line around the unwanted area. Then select Edit and “Fill /content Aware” or press “Shift + F5”. Use the patch tool to remove any areas that are not properly patched. Add this point you can also add a small logo to your nadir area. Save your image, and close Photoshop.

Select All 6 Cube Images and drop them onto the CUBEtoSPHERE Droplet.

Voila, you nadir is perfectly patched without an extra image to shoot.

To check your 360 panorama drop your new spherical image onto the MAKE PANO droplet, or drop multiple images onto the MAKE VTOUR droplet and wait a second until your Virtual Tour is ready.

Now you could transfer the complete folder that is generated by KRPanoTools to your web server. But off course you want to upload your new images to Google Maps Street View to further process with PanoWalks.

Virtual Reality Street View Mode on Google Maps for Android

2015-08-25T15:59:07-07:00

Google Maps' first-person Street View is a natural fit for virtual reality, and the two have finally come together for anyone with an Android phone and some cardboard. The Android version of Google's popular navigation app now has a VR mode, allowing anyone with a Google Cardboard viewer to virtually walk around select cities all over the world.

To activate Google Maps' VR mode, you simply open Street View and double-tap the refresh icon at the bottom right of the screen. This will split the display in two, so you'll need to drop your phone into one of several Google Cardboard viewers to experience the virtual reality effect.

Adding a Dynamic YouTube Hotspot

2015-08-25T15:32:10-07:00

Adding a Boundary Hotspot

2015-08-25T15:31:14-07:00

Adding a Dynamic Html Hotspot

2015-08-25T15:30:40-07:00

Adding a Floor Plan

2015-08-25T15:26:03-07:00

Free Spin!

2015-08-25T12:47:23-07:00

If you want to add Life to your Google Virtual Tour you can use the Free Spin App to add Auto-Rotation to your tour, and then easily generate an embed code for your webpage.

Click here to go to the Free Spin App and click the '+' Button to open the Search & Embed Form:

Paste your 22 character Panorama ID or the COMPLETE URL from Google Maps and click 'Update Panorama'

Click 'Search':

Then click the red 'Map' Button:

1.Type your Business Name and 2.Click on one of the Search results in the Drop-down List:

In the new window click on the yellow dot in the center of the map. If you don't see a yellow dot try to zoom into or out of the map with your scroll wheel:

Your selected Panorama will open indicating the current Panorama ID. Click 'Insert':

Your new Panorama ID will be transferred to the main window. Click 'Update Panorama' to confirm your Selection.

And you will see your Tour updated with the Auto-Rotation Feature.

Click the 'Pause' Button the stop AutoSpin, adjust your viewing angle and zoom value and click the '+' Button one last time:

1. Adjust the maximum width and height of your IFrame and 2. copy the code for your AutoSpin Panorama to your webpage.

Can I use the same tour with different Entry Points?

2015-08-24T11:20:11-07:00

Once your Tour is published you can choose any Panorama as Starting Panorama as long as you know the corresponding Panorama ID.

Go to your Menu Section and open one of your Menu Items, then click select to open the Panorama. At the bottom you will find the URL that opens your tour with the current view.

Adjust the view and copy & paste the URL to your browser bar.