Using Custom Google Map with Color Styles from Snazzy Maps

Here’s my public: https://webflow.com/design/frostbyte?preview=20c21ccb1138fed056ef31e88fdf9600

What I’d like to do is add a coloured overlay over the map (it’s on the front page near the bottom, and again in the “Contact” page. I’ve tried putting a div block over top, or formatting the section, but the map is always “on top”??

Is this even possible, and if so, could someone help me out?

Thanks!

1 Like

For example - can I do something like this through Webflow?

I just don’t know how to edit js, etc. (I’m a total noob to this, but I’m a super fast learner!)

2 Likes

haha that was the map I was going to recommend :smile: Let me get this working quick and I will post the instructions, once I get it working :smile: And yes, you can always PM any of the Webflow staff :smile:

1 Like

Hi @ag3nt7 , here is the instructions for making a custom google map, using Snazzy maps styling, with an info window and custom map marker:

Step 1:

Create a section on your page and give it a unique id of “map” (without the quotes)
Give the new map section a height of 500px

Step 2:

Copy the following code to the HEAD of the Site Settings, this code will fix the google controls so they work on sites which are responsive and the controls won’t get all squished on the page.

<style>
    
    #map img {  
    max-width: none;   
} 
    
</style>

Step 3:

Copy the following into the Before Body section of the Custom Code settings page. In the script link to Google maps,

replace the your_google_map_api_key value with your own API Key.

// The following line initializes Google Maps using your own Google Maps API key
// The google api script is required
// You need to include this script on any page that has a Google Map.
// When using Google Maps on your own site you MUST signup for your own API key at:
// Overview  |  Maps JavaScript API  |  Google Developers
// After your sign up replace the key in the URL below or paste in the new script tag that Google provides.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=your_google_map_api_key&sensor=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(45.088530, -64.367951), // 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: [{stylers:[{hue:'#2c3e50'},{saturation:250}]},{featureType:'road',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
                };


                
		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(45.088530, -64.367951);
                
		// 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);
            	});  
            
}

</script>

Let us know if that works for you, and feel free to ask questions :smile: Cheers!

12 Likes

This works great!

I’m not sure why, but when I first used the top few lines (commented out) of the script in the custom code section, the actual writing showed up at the bottom of the page. So I just start from:

<script type".... and that makes it work for me. Your help has been incredible and far beyond what I expected! Cheers.

@ag3nt7 Sorry I correct that, you can remove the first lines that begin with // those are just comments, and I did not put those in the script tag… just remove those lines…

@cyberdave Exactly what I was looking for. However, when adapting to my site, I’m stuck at the part where to actually insert the map into the page.

I’ve modified the API key to my own, the Lat and Long figures (twice), own styling code and the title (in the last few lines of code).

So how do I exactly insert the map now into a page?

Tried inserting the Map widget but no go. Nor an embed.

Thank you!

Hi,

You need to create a section (where you want your map to display), and give it a height (I use 500 px) and give it the name (“map”). That’s what the javascript is referencing. And by name it “map” I don’t mean the styling,but in the settings panel, it has to have the Unique id: map.

Hope that helps. Feel free to message me if you need further guidance!

-J

4 Likes

Oh - and just so you know, you won’t be able to see the custom map until it’s published…

1 Like

@ag3nt7 Ah, got ya. That did the trick.

Thank you!

PS: I consider myself knowledgeable when it comes to tech but I can’t figure out how to drop a private message here. But that’s a question for another topic. Have a great day!

Click on the person’s avatar - I too didn’t figure that one out right away. Glad that worked!