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