Streaming live at 10am (PST)

Where is Unique ID / help with snazzy maps


#1

Hi,

I am trying to use Snazzy Maps but I can't find Unique ID option in the Designer. Could you tell me where it is?

Cheers!


#2

Select and element and go to settings tab:

Webflow says "For in page linking" but it's actually much much more than that, as it transfer to a CSS ID in the code, like #myID. It's usefull for some Javascript things that require IDs and not classes.


#3

Well, thanks, it works now :)) Thank you, have a good day!


#4

Could you please take a look at my code? When I am pasting sample from the topic here it works, but there is no map showing after I past a code from Snazzy Maps website:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=my own api key=false"></script>


    <script type="text/javascript">

// Create and Initialise the Map (required) our google map below

        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // 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: 17,
                scrollwheel: false,
                // The latitude and longitude to center the map (always required)

                center: new google.maps.LatLng(54.403106, 18.570810), // Nova Scotia

                // How you would like to style the map. 
                // This is where you would paste any style found on [Snazzy Maps][1].
                // copy the Styles from Snazzy maps,  and paste that style info after the word "styles:"
                
                styles: [
{
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "saturation": 36
        },
        {
            "color": "#333333"
        },
        {
            "lightness": 40
        }
    ]
},
{
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "visibility": "on"
        },
        {
            "color": "#ffffff"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "featureType": "all",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#fefefe"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#fefefe"
        },
        {
            "lightness": 17
        },
        {
            "weight": 1.2
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f5f5f5"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f5f5f5"
        },
        {
            "lightness": 21
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#dedede"
        },
        {
            "lightness": 21
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 17
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 29
        },
        {
            "weight": 0.2
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 18
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f2f2f2"
        },
        {
            "lightness": 19
        }
    ]
},
{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#e9e9e9"
        },
        {
            "lightness": 17
        }
    ]
}

]

	var mapElement = document.getElementById('map');

            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

	// Following section, you can create your info window content using html markup

            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                'sandstone rock formation in the southern part of the '+
                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                'Aboriginal people of the area. It has many springs, waterholes, '+
                'rock caves and ancient paintings. Uluru is listed as a World '+
                'Heritage Site.</p>'+
                '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                '(last visited June 22, 2009).</p>'+
                '</div>'+
                '</div>';


	// Define the image to use for the map marker (58 x 44 px)

            var image = 'http://uploads.webflow.com/537f700d5bb0a27f34444d0c/53b054015eb95f024f4d7c5e_map_marker.png';

	// Define the Lattitude and Longitude for the map location

            var myLatLng = new google.maps.LatLng(54.403106, 18.570810);

	// Define the map marker characteristics

            var mapMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title:  'Frostbyte Interactive'

            });

           // Following Lines are needed if you use the Info Window to display content when map marker is clicked

	   var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });

    	// Following line turns the marker, into a clickable button and when clicked, opens the info window

        	google.maps.event.addListener(mapMarker, 'click', function() {
            	infowindow.open(map, mapMarker);
        	});

}


#5

Sorry no, I know nothing in Javascript.


#6

Ok, maybe someone else could help me figure it out. I will try to make my post clear. Here is the instruction I found on forum here. And there is an example of styled map:

[{stylers:[{hue:'#2c3e50'},{saturation:250}]},{featureType:'road',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
};

I replaced it by code from Snazzy Maps:

[{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]

and it just not appear on the site after I replaced it.


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.