May 27, 2015

Getting Started With The Google Maps API

You’ve probably been noticing that more and more websites are using beautiful and in some cases, branded maps to show all sorts of data (most commonly a business location) on their website. Maps are a great way to help visualize data in relation to a location and are already being used to do just that. For example, a team of drone pilots recently mapped out the damage caused by cyclone Pam on the Pacific archipelago of Vanuatu. New ideas and ways to use maps are always in development too, tracking your delivery in real-time would be a very nice luxury. It seems the possible uses for maps are endless and will undoubtedly become more and more integrated with our daily lives.

It’s likely that you don’t need a solution quite as elaborate as the above examples, so for this tutorial, we’ll be walking through the steps to adding a customized Google Map to a website and looking at some of the options available to us through the Google Maps API. Before we get started, it would be helpful to have a basic understanding of HTML, CSS, and Javascript.

The Final Result

Once you work your way through the steps below, you will end up with a beautiful map with a custom color scheme and pin to compliment your site.

Here is a preview of what our demo project ended up like, you can download the files for the demo project above.

Google Maps Implementation

The map will be 100% the width of its parent element. So keep that in mind when determining where you’ll insert the <div id="map"></div> element in your page.

Getting Started

There are 4 steps that we need to complete in order to add the map to our page. We’ll go through each step in detail and if you have any questions, please leave them in the comments below.

1. Add the Google Map Script to our site

The first thing you’ll need is to pull in the Google Maps API script and add it to the <head></head> of your site.

You should be able to copy and paste this script:
<script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script>

2. Add customized Google Map options

Now that we’ve pulled in the Google Maps API, we can add in our map options and select a color scheme for the map, or you can use the default color scheme if you wish.

We’ll add a new javascript file and call it right before the closing </body> tag. You may also add this to an existing javascript file as well to eliminate the additional request. The new javascript file will contain our map options and initialize the map once the page is loaded. You can copy and paste the code below:

// This will create our Google Map once the page has loaded
google.maps.event.addDomListener(window, 'load', init);

// To use a custom map marker, you can enter your the URL to your image file here. Enter the dimensions of the marker in ".Size(width/2, height/2)".
var mapMarker = new google.maps.MarkerImage( 'http://yoursite.com/path/to/marker.png', null,null,null, 
new google.maps.Size(45, 50) );

function init() {

    var mapOptions = {
        // Set the zoom level (required)
        zoom: 11,

        // Disable zooming on scroll
        scrollwheel: false,

        // Set map center with latitude and longitude (required)
        center: new google.maps.LatLng(40.7542123,-73.9800242), // New York

        // This is the color scheme of the map, you can replace this with the styles of your chosen scheme from Snazzy Maps.
        styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]
    };

    // Set our map to fill the HTML element with the id "map"
    var mapElement = document.getElementById('map');

    // Render the new Google Map using our options
    var map = new google.maps.Map(mapElement, mapOptions);

    // Set the location of the marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.7542123,-73.9800242),
        map: map,
        icon: mapMarker,
    });
}

Our friends over at Snazzy Maps have compiled a database of great color schemes for easy use. It is likely you can find something that will suit your needs there and modify if necessary.

We’ll use the “Pale Dawn” theme for the purposes of this tutorial.

Snazzy Maps - Pale Dawn Color Scheme

3. Insert the HTML for the map

The map won’t appear anywhere on the site just yet, first we’ll need to add the HTML element that we told the Google Maps API to render our map to. In our case, that was <div id="map"></div>. You can place this element wherever you’d like the map to appear on your site.

4. Add CSS to size the map

Finally, you can add some CSS to the <div id="map"></div> element in your CSS file. This may depend on the existing elements on your site, so I’ll leave it up to you to add the proper CSS for your site. For our tutorial, we’ll make the map 100% width and 50% height of the viewport by adding the following to our CSS file, however in many cases you may want to use px values for the height.:

#map {
    display: block;
    width: 100%;
    width: 100vw;
    height: 50%;
    height: 50vh;
}

That’s it! You should now see your new map in your browser. Let us know if you have any questions in the comments below and please share your results with us.

Filed under:  Tutorials Web Development  ||  Tagged under:
Author:

Dylan Dunlop

When he isn’t honing in on his coding skills, Dylan’s either mastering various styles of guitar playing or bird watching.
Leave a comment
comments powered by Disqus

Base Terminology

SEO is the process of affecting the visibility of a website or a web page in a search engine's un-paid ("organic") search results.
The semantic web refers to the next stage of the world wide web and aims to ascribe semantic meaning to all web content through a collection of systems of classification. This means that, in the future, machines will be able to better understand the content we produce, resulting in better search results, new applications and an Internet that is fundamentally different from the one we use today!
What if each of the objects around you had a unique identifier that can be connected to the Internet? The goal of the Internet of things is to equip all objects in the world with tags that allow them to be digitally organized or manipulated. The implications? Less theft, less waste and the ability to control your surroundings in a manner never before possible.
Conversion optimization is the practice of modifying the parameters of a lead-generating system to stimulate a higher success rate as defined by goals. Most conversion optimization is structured to create an increase in ROI (return on investment). We frequently use multivariate and A/B split testing when optimizing conversion, wherein we test two or more systems at the same time, analyze their performance and deduce precisely what action items will bring us closest to the set goals in the least amount of time.
Market diagnostics or analytics is the process of collecting and analyzing business data — especially consumer data. This allows us to assess and improve the effectiveness of a marketing campaign.
In many applications today, there is such a phenomenal quantity of data available that it's difficult to collect and process with traditional database tools. The field of collecting, manipulating and drawing conclusions from massive quantities of data from a particular source is known as big data.
What started as a CMS (content management system) that was only meant to create and edit blog content has grown at a tremendous rate to become the most ubiquitous system for developing websites on the internet. WordPress accounts for an incredible 15% of all sites on the web.

RT @ramsville: I love torrents so much I call it PirateBae.

3 months ago

A5: Few setups are better for understanding your users than GA with Google Tag Manager tracking events #semrushchat

8 months ago

A2: People may emotional decisions. They by products when the right emotion is stimulated. The right creative can do this #semrushchat

8 months ago

Request Our Portfolio





  1. Which option best describes you? *

  2. Are you a key decision maker in the business you represent? *