I did some testing, and managed to add a map, but this stuff is quite complicated to implement if you want to add it properly. I would have to write a tutorial which includes a substantial amount of adding code. We have to add to the fact that Imagevue X3 is an AJAX application, so you would to trigger the map on ajax-page-loads also, checking if the map-container exists. The default examples just trigger the map-code on window loaded, which is not good enough.
GeoPal wrote:I tried embedding html code/page- it worked but I got sliders on bottom and right side, and it didn't scale on mobile resolution.
May I ask what kind of "embed" you used? what code?
Here is my quick test:
I will go through a quick tutorial, but I don't have time to spend writing in detail, so you will need to figure out how to replace the map-json settings from snazzymaps into my code:
1. Go to the page where you want to add the map. Add html code like this:
<div id="map" class="flex-video x3-style-frame"></div>
2. Go to settings -> custom -> custom javascript, and add this:
function x3_load_page(){
if($('#map').length) mymap();
};
The above code will trigger the mymap() function on ajax page loads, IF the map-container with id #map exists.
3. Go to settings -> custom -> Custom <head>, and add the general code:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function mymap() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
The above code is generally taken from a snazzymap example, but function
init() was renamed to
mymap(), because we can't have a function name init() floating around in the root document. Basically you would need to replace the
mapOptions (and optionally
marker) variables in the above. Those values are basically what you get from the snazzymaps app ...
I might be able to create a better tutorial later, but as you can see, it's quite comprehensive. I am not sure what "embed" method you used, but by doing it properly with the API, it loads nicely as a map, just like my screenshot above.