Using Custom Google Map with Color Styles from Snazzy Maps

Design help General
9

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