Difference between revisions of "How to add a google map to a virtual tour"

From 3dvista
Jump to navigation Jump to search
 
Line 1: Line 1:
Google Maps in a virtual tour
+
== '''Google Maps in a virtual tour''' ==
 
 
 
Add a container to your skin to contain the Google Map and name it MapContainer.
 
Add a container to your skin to contain the Google Map and name it MapContainer.
  
 
Add an “Execute JavaScript” action to MapContainer to be executed “On Show” and enter a code like this (filling the config part as explained below):
 
Add an “Execute JavaScript” action to MapContainer to be executed “On Show” and enter a code like this (filling the config part as explained below):
  
CONFIG BEGINS HERE  
+
CONFIG BEGINS HERE
  
 
<code>var config = {</code>
 
<code>var config = {</code>
Line 117: Line 116:
 
<code>}</code>
 
<code>}</code>
  
== Filling the config part of the code ==
+
==Filling the config part of the code==
  
=== apiKey ===
+
===apiKey===
 
You’ll need to get a Google Maps JavaScript API key, please follow the steps described here: <nowiki>https://developers.google.com/maps/documentation/javascript/get-api-key</nowiki>
 
You’ll need to get a Google Maps JavaScript API key, please follow the steps described here: <nowiki>https://developers.google.com/maps/documentation/javascript/get-api-key</nowiki>
  
Line 128: Line 127:
 
   apiKey: 'abc123abc'
 
   apiKey: 'abc123abc'
  
=== centerLat and centerLng ===
+
===centerLat and centerLng===
 
These are the coordinates where the map center will be displayed.
 
These are the coordinates where the map center will be displayed.
  
 
You can get the coordinates of a place as explained here: <nowiki>https://support.google.com/maps/answer/18539</nowiki>  
 
You can get the coordinates of a place as explained here: <nowiki>https://support.google.com/maps/answer/18539</nowiki>  
  
=== zoom ===
+
===zoom===
 
This is the zoom level of the map. It is an integer value, the minimum value is 0, which will display the whole world, the maximum value varies depending on where the map is centered. You can start with a value of 10 and try increasing and decreasing it according to your needs.
 
This is the zoom level of the map. It is an integer value, the minimum value is 0, which will display the whole world, the maximum value varies depending on where the map is centered. You can start with a value of 10 and try increasing and decreasing it according to your needs.
  
=== markers ===
+
===markers===
 
This is a list of the marks (the red icon) linked to the tour media that you want to display on the map. You’ll have to fill the latitude and longitude of the marker (lat and lng field), the tooltip that will be displayed while hovering the icon (toolTip field) and the name of the media as it appears in VT Pro (mediaName field).
 
This is a list of the marks (the red icon) linked to the tour media that you want to display on the map. You’ll have to fill the latitude and longitude of the marker (lat and lng field), the tooltip that will be displayed while hovering the icon (toolTip field) and the name of the media as it appears in VT Pro (mediaName field).

Latest revision as of 10:28, 17 April 2020

Google Maps in a virtual tour

Add a container to your skin to contain the Google Map and name it MapContainer.

Add an “Execute JavaScript” action to MapContainer to be executed “On Show” and enter a code like this (filling the config part as explained below):

CONFIG BEGINS HERE

var config = {

   apiKey: 'YOUR_OWN_GOOGLE_MAPS_API_KEY',

   centerLat: 40.7590927,

   centerLng: -73.9736084,

   zoom: 13,

   markers:

   [

       {

           lat: 40.748421,

           lng: -73.985517,

           toolTip: 'Go to panorama A',

           mediaName: 'Panorama A'

       },

       {

           lat: 40.757927,

           lng: -73.985559,

           toolTip: 'Go to panorama B',

           mediaName: 'Panorama B'

       }

   ]

};

/* CONFIG ENDS HERE */

var player = this;

var mapContainer = player.getComponentByName('MapContainer');

if (mapContainer.get('children').length == 0)

{

   var html = player.createInstance('HTMLText');

   html.set('width', '100%');

   html.set('height', '100%');

   html.set('html', [

       '<div id="map" style="position:relative;"></div>',

       '<script src="https://maps.googleapis.com/maps/api/js?key=' + config.apiKey + '&callback=initMap" async defer></script>'

   ].join(''));

   html.bind('resize', resize);

   mapContainer.set('children', [html]);

   var map;

   window.initMap = function ()

   {

       map = document.getElementById('map');

       var gmap = new google.maps.Map(map, {center: {lat: config.centerLat, lng: config.centerLng}, zoom: config.zoom, streetViewControl: false, fullscreenControl: false});

       config.markers.forEach(function(marker)

       {

           var gmarker = new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: gmap, title: marker.toolTip});

           gmarker.addListener('click', function() { player.setMainMediaByName(marker.mediaName); });

       });

       resize();

   };

   function resize()

   {

       if (!map)

           return;

       map.style.width = html.get('actualWidth') + 'px';

       map.style.height = html.get('actualHeight') + 'px';

   }

}

Filling the config part of the code

apiKey

You’ll need to get a Google Maps JavaScript API key, please follow the steps described here: https://developers.google.com/maps/documentation/javascript/get-api-key

If you restrict your API key to the URL of your tour, as advised on the link, and you want the map to appear on the preview you’ll need to add http://localhost:8000/index.htm?* to the Website restrictions list.

Please make sure you enclose the API key between quotes in the config:

   apiKey: 'abc123abc'

centerLat and centerLng

These are the coordinates where the map center will be displayed.

You can get the coordinates of a place as explained here: https://support.google.com/maps/answer/18539

zoom

This is the zoom level of the map. It is an integer value, the minimum value is 0, which will display the whole world, the maximum value varies depending on where the map is centered. You can start with a value of 10 and try increasing and decreasing it according to your needs.

markers

This is a list of the marks (the red icon) linked to the tour media that you want to display on the map. You’ll have to fill the latitude and longitude of the marker (lat and lng field), the tooltip that will be displayed while hovering the icon (toolTip field) and the name of the media as it appears in VT Pro (mediaName field).