Come aggiungere una mappa Google a un tour virtuale

Aggiungi un contenitore alla tua skin per contenere la mappa di Google e chiamalo MapContainer.

Aggiungi un'azione "Esegui JavaScript" a MapContainer da eseguire "On Show" e inserisci un codice come questo (riempiendo la parte di configurazione come spiegato di seguito):

/* 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';
   }
}

Compilando la parte di configurazione del codice

apiKey

Dovrai ottenere una chiave API JavaScript di Google Maps, segui i passaggi descritti qui: https://developers.google.com/maps/documentation/javascript/get-api-key

Se limiti la tua chiave API all'URL del tuo tour, come consigliato sul link, e vuoi che la mappa appaia nell'anteprima dovrai aggiungere http://localhost:8000/index.htm?* al Elenco delle restrizioni del sito web.

Assicurati di racchiudere la chiave API tra virgolette nella configurazione:

apiKey: 'abc123abc'

centerLat e centerLng

Queste sono le coordinate in cui verrà visualizzato il centro della mappa.

Puoi ottenere le coordinate di un luogo come spiegato qui: https://support.google.com/maps/answer/18539

zoom

Questo è il livello di zoom della mappa. È un valore intero, il valore minimo è 0, che visualizzerà il mondo intero, il valore massimo varia a seconda di dove è centrata la mappa. Puoi iniziare con un valore pari a 10 e provare ad aumentarlo e diminuirlo in base alle tue esigenze.

marcatori

Questo è un elenco dei contrassegni (l'icona rossa) collegati al tour multimediale che desideri visualizzare sulla mappa. Dovrai inserire la latitudine e la longitudine del marker (campo lat e lng), il tooltip che verrà visualizzato passando il mouse sull'icona (campo toolTip) e il nome del media come appare in VT Pro (campo mediaName) .