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

From 3dvista
Jump to navigation Jump to search
Line 4: Line 4:
 
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 */  
var config = {
+
<code>var config = {</code>
     apiKey: 'YOUR_OWN_GOOGLE_MAPS_API_KEY',
+
     <code>apiKey: 'YOUR_OWN_GOOGLE_MAPS_API_KEY',
 
     centerLat: 40.7590927,  
 
     centerLat: 40.7590927,  
 
     centerLng: -73.9736084,
 
     centerLng: -73.9736084,
Line 23: Line 23:
 
             mediaName: 'Panorama B'
 
             mediaName: 'Panorama B'
 
         }
 
         }
     ]
+
     ]</code>
};
+
<code>};
 
/* CONFIG ENDS HERE */
 
/* CONFIG ENDS HERE */
 
var player = this;
 
var player = this;
 
var mapContainer = player.getComponentByName('MapContainer');
 
var mapContainer = player.getComponentByName('MapContainer');
 
if (mapContainer.get('children').length == 0)  
 
if (mapContainer.get('children').length == 0)  
{
+
{</code>
     var html = player.createInstance('HTMLText');
+
     <code>var html = player.createInstance('HTMLText');
 
     html.set('width', '100%');
 
     html.set('width', '100%');
 
     html.set('height', '100%');
 
     html.set('height', '100%');
     html.set('html', [
+
     html.set('html', [</code>
         '<div id="map" style="position:relative;"></div>',
+
         <code>'</code><div id="map" style="position:relative;"></div><code>',</code>
         '<script src="https://maps.googleapis.com/maps/api/js?key=' + config.apiKey + '&callback=initMap" async defer></script>'
+
         <code>'<script src="https://maps.googleapis.com/maps/api/js?key=' + config.apiKey + '&callback=initMap" async defer></script>'
     ].join(''));
+
     ].join(''));''
 
     html.bind('resize', resize);
 
     html.bind('resize', resize);
 
     mapContainer.set('children', [html]);
 
     mapContainer.set('children', [html]);
Line 57: Line 57:
 
         map.style.width = html.get('actualWidth') + 'px';
 
         map.style.width = html.get('actualWidth') + 'px';
 
         map.style.height = html.get('actualHeight') + 'px';
 
         map.style.height = html.get('actualHeight') + 'px';
     }
+
     }</code>
}
+
<code>}</code>
  
 
Filling the config part of the code
 
Filling the config part of the code

Revision as of 10:24, 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', [

'

',

       '<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).