How to add a google map to a virtual tour

From 3dvista
Revision as of 10:28, 17 April 2020 by Jose (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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):


var config = {


   centerLat: 40.7590927,

   centerLng: -73.9736084,

   zoom: 13,




           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'





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="' + config.apiKey + '&callback=initMap" async defer></script>'


   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});



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

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




   function resize()


       if (!map)

           return; = html.get('actualWidth') + 'px'; = html.get('actualHeight') + 'px';



Filling the config part of the code


You’ll need to get a Google Maps JavaScript API key, please follow the steps described here:

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:


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