Google Street View Integration

You can integrate a Google Street View panoramic photo viewer with the Geocortex Viewer for HTML5 using the Integration module.

Note: It is your responsibility to ensure you are within Google's terms of use when integrating this sample.  As of June 11, 2018, Google updated the Maps billing model and now require an API key to use the Street View API in an embedded viewer.  Make sure you have set up an API key that is valid for your viewers' hostname.

1. Unzip the download package to a convenient location.
2. Copy 'GoogleMaps.html' into the '3rdPartyMaps' folder of your IIS Virtual Directory, eg:  C:\inetpub\wwwroot\Html5Viewer\Resources\3rdPartyMaps\
3. On line 10 of the GoogleMaps.html file, add you API key to the URL, as follows: 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=yourAPIKeyGoesHere"></script>

Note: Google will enforce the need for an API key when accessing Street View. As mentioned above, It is your responsibility to ensure you are within Google's terms of use when integrating this sample.

4. Make sure that you have enabled access to the Google Maps JavaScript API in your Google API Dashboard (https://console.developers.google.com/apis/dashboard)

Configure the Integration Module

1. Open the xxxxxx.json.js file that configures the Viewer, eg: C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\[instance]\REST Elements\Sites\[site]\Viewers\[viewer]\VirtualDirectory\Resources\Config\Default\Desktop.json.js
2. Update the 'externalComponents' property of the 'Integration' module to include Google Street View:

{
  "moduleName": "Integration",
  ...
  "viewModels": [
   {
    "id": "ExternalComponentViewModel",
    "type": "geocortex.essentialsHtmlViewer.mapping.modules.integration.ExternalComponentViewModel",
    "configuration": {
     ...
     "externalComponents": [
      {
       "id": "googleMaps",
       "displayName": "Google Street View",
       "uri": "Resources/3rdPartyMaps/GoogleMaps.html",
       "viewpointIndicatorUri": "Resources/Images/Icons/location-direction-blue-32.png"
      }
     ]
    }
   }
  ]
},

Add the 3rd Party Maps button to the toolbar

1. In Geocortex Essentials Manager, edit the viewer whose configuration has just been updated.
2. Open the 'Toolbar' configuration.
3. In the 'Available Tools' column, find the 'Linked Maps' tool and drag it to the desired position in the 'Configured Toolbar' column.
4. Click 'Apply Changes'
5. Click 'Save Site'

Now, launch the viewer and enjoy Google Street View integration!

Please see the article Restrict your Google Street View API Key for more information on protecting your Google API key.

and this post for information on changes to the pricing in June 2018 - https://support.vertigis.com/hc/en-us/community/posts/11498510956306-Google-Maps-and-Streetview-new-pricing-on-June-11th