How to create a custom Google map using Snazzy Maps
Have you ever embedded a Google map location to your site and felt like the colours were completely out of branding? Have you tried using custom map repositories without success? Even if you are not a Javascript expert, this tutorial will guide you in creating an awesome and unique Google map.
Steps
- The first thing we need is a Google API key. Click on this link to create your key. Then click on “Get a key” and a new window will open on the right side. Again, click on Get a key, give it a name, and keep the window open (we will need this for the next step).
- Now, let’s start coding. Create a HTML file and place the following link on the header section:
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=YOUR API KEY GOES HERE”></script>
Make sure to paste your API key where instructed
3. Create a div with an ID on your HTML. For this example let’s call it “map”:
<div id=”map”></div>
4. Create a CSS file and assign a width and height to our map. These are your choice, depending on the size you prefer. Example:
#map {
width: 750px;
height: 500px;
}
5. Then, browse Snazzy Maps and choose the style you prefer. Keep the window open, we’ll need the style code after.
6. Create a Javascript file and paste the following code inside. Make sure to also paste your snazzy map style where instructed:
// When the window has finished loading create 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: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(COORDINATES GO HERE), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: PASTE YOUR STYLE HERE!
};
// 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(COORDINATES GO HERE),
map: map,
title: ‘Snazzy!’
});
}
7. Final Step: Adding coordinates of your location. If you notice on the JS code, there are two places where we need to add coordinates, one for map display and the second one for our marker. To get coordinates, search your address on Google maps and copy the coordinates from the URL.
Example:
Make sure to place your coordinates where instructed
