¿Cómo podemos ayudar?

< All Topics
Print

How to add a google map to 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).

Tags: