How to add a google map to a virtual tour

From 3dvista
Revision as of 09:29, 17 April 2020 by Jose (talk | contribs) (Created page with "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 exe...")
(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): /* 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).