Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
studioCREATIVE
Topic Author
Posts: 5
Joined: 18 Nov 2014, 16:31

How make insert Black and White Google Maps

24 Aug 2015, 10:55

Hi,

Tell me how I can achieve this effect... black and white map stretched across the entire screen.

Attachments:
Image
this stile map:
https://snazzymaps.com/style/5/greyscale

Thanks!
https://studiocreative.bg
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How make insert Black and White Google Maps

24 Aug 2015, 13:02

Right now I don't have time to study how they use an external API to create a styled Google Map, as we are very busy finalizing X3 release. I could probably help with some html code to create a wide map ...
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: How make insert Black and White Google Maps

21 Dec 2015, 07:43

Hi Karl,
I also want to change the style of the map.
I have found this site with predefined styles and would like to ask if I can put the code somewhere?

https://snazzymaps.com/explore

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.
Thanks in advance!
G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How make insert Black and White Google Maps

21 Dec 2015, 09:52

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:
Image

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:
Code
<div id="map" class="flex-video x3-style-frame"></div>
2. Go to settings -> custom -> custom javascript, and add this:
Code
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:
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.
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: How make insert Black and White Google Maps

22 Dec 2015, 00:56

Thanks, Karl!
I will follow your tutorial, thanks a lot and Happy Holidays!
Will post the results!
Best, George
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: How make insert Black and White Google Maps

22 Dec 2015, 01:16

It turned out nicely!
http://studiocreative.bg/contact/

Thanks again! Great work! :shock: :D :idea:
 
User avatar
$winter
Posts: 21
Joined: 24 Jul 2009, 03:13

Re: How make insert Black and White Google Maps

23 Nov 2016, 21:17

mjau-mjau wrote:1. Go to the page where you want to add the map. Add html code like this:
Code
<div id="map" class="flex-video x3-style-frame"></div>
2. Go to settings -> custom -> custom javascript, and add this:
Code
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:
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.
i tryed i an i get there an error:
"js?sensor=false:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/docu ... -map-error"

i'bve replaced the frist line
<script async defer src="https://maps.googleapis.com/maps/api/js ... ""=initMap"  type="text/javascript"></script>