< All Topics
Print

Cómo añadir un mapa de Google a un tour virtual

Añade un contenedor a tu skin para que contenga el mapa de Google y asígnale el nombre MapContainer.

Añade una acción «Ejecutar JavaScript» a MapContainer para que se ejecute «On Show» e introduce un código como este (completando la parte de configuración como se explica a continuación):

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

Rellenar la parte de configuración del código

apiKey

Deberás conseguir una clave API de JavaScript de Google Maps, sigue los pasos que se describen aquí: https://developers.google.com/maps/documentation/javascript/get-api-key

Si restringes tu clave API a la URL de tu tour, como se indica en el enlace, y quieres que el mapa aparezca en la vista previa, deberás añadir http://localhost:8000/index.htm?* a la Lista de restricciones del sitio web.

Asegúrate de incluir la clave API entre comillas en la configuración:

apiKey: 'abc123abc'

centerLat y centerLng

Estas son las coordenadas donde se mostrará el centro del mapa.

Puedes averiguar las coordenadas de un sitio como se explica aquí: https://support.google.com/maps/answer/18539

zoom

Este es el nivel de zoom del mapa. Es un valor entero, el valor mínimo es 0, que mostrará todo el mundo, el valor máximo varía según el centro del mapa. Puedes comenzar con un valor de 10 e intentar aumentarlo o disminuirlo según tus necesidades.

marcadores

Esta es una lista de las marcas (el icono rojo) vinculadas a los medios del tour que deseas mostrar en el mapa. Tendrás que completar la latitud y la longitud del marcador (campo lat y lng), la información sobre herramientas que se mostrará al pasar el icono (campo de información sobre herramientas) y el nombre de los media tal como aparece en VT Pro (campo mediaName) .

Etiquetas: