I’ve grown a little tired recently of seeing the same old Google Maps embedded onto the contact webpage of small businesses. In this tutorial I’m going to walk through some of the basic features of the Google Maps API (V3) and create a custom map for a local business.
I first tried out the Google Maps API when creating a mini map embed for our contact page. Dissatisfied with the clutter of the default Google Places embed, I managed to achieve a much more usable map whilst maintaining it’s mini size.
The types of Map Embeds Available
At present, there are three different ways to add Google Maps to your website. Classic Google Maps (below left), New Google Maps (centre) and by using the Google Maps API 3.0 (below right).
As you can see, particularly when used small, the classic map embed is barely usable. Whilst the new standard Maps embeds are better, the Maps API gives you full control with zooming and using your own custom marker graphics.
In this tutorial I’m going to explain the basics of creating your own local business Google Map embed using the API.
This is not a complete tutorial to show you all of the possible features of the API, however I am going to cover the basics of creating your own map with a custom marker and controls.
Getting Started by loading the Google Maps API
To begin work on your map, you must first load the Google Maps API by adding the following code within the HEAD tag of your web page(s) that will be displaying maps via the API:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_true_OR_false">
</script>
Simply replace API_KEY with your API key (see below) then set ‘sensor=’ to either TRUE or FALSE. If you’re intending on using the HTML5 Geolocation tools built in the API, set this to TRUE, or if you’re just making a simple map like in this tutorial, set it to FALSE.
API Keys
Although not compulsory, Google recommend that you log into their API console to create and use a free API key. By using an API key you can monitor your API usage and access some simple statistics within your Developer console.
How to find a location’s coordinates on Google Maps
So now that we’re running the API, we need to start by acquiring the coordinates for the location we wish to focus on in our map. The simplest way to do this, is to literally find the point on Google Maps, then Right Click as shown below:
By clicking on ‘What’s Here?’ the location’s latitude and Longitude coordinates are presented in the search box. Save these for later.
Defining and creating your Google Map
So now that we have our coordinates, we can begin to put together our map. To do this, we’ll need a blank Div placeholder and also some initial inline JavaScript to get our Map off the ground:
<div id="map-canvas" style="height:400px; width:600px;"></div>
<script>
function initialise() {
/* All of our map settings are going here */
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
Essentially, the inline JavaScript is going to render our custom Google Map inside the empty div. In order to load our map into the div after the page has fully loaded, I’ve started by creating an empty ‘initialise’ function. Everything within our ‘initialise’ function will therefore be triggered once the page has fully loaded. Now let’s focus on the settings that fall within our initialise function:
function initialise() {
var myLatlng = new google.maps.LatLng(53.068165,-4.076803); // Add the coordinates
var mapOptions = {
zoom: 8, // The initial zoom level when your map loads (0-20)
center: myLatlng, // Centre the Map to our coordinates variable
mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
Customising this initial code is very straight forward. Start by adding your co-ordinates for your location and experimenting with the zoom parameter. If you view this code in your browser, you should get your initial Google Map centred on your coordinates.
How to add a custom (Retina compatible) Marker icon
Now that our Map is centralised on our coordinates, we need to add a marker for our local business. It’s also worth noting that you can add a hi-dpi/retina compatible images as your marker. To do this, we create a variable for our marker and set it as follows:
var image = new google.maps.MarkerImage("marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
var marker = new google.maps.Marker({ // Set the marker
position: myLatlng, // Position marker to coordinates
icon:image, //use our image as the marker
map: map, // assign the market to our map variable
title: 'Click to visit our company on Google Places' // Marker ALT Text
});
On line 1 above, you’ll notice the marker’s width and height dimensions in the last parameter. When you create your PNG marker, simply ensure that you make it at twice the resolution and it will be displayed correctly for those with a Hi-DPI/Retina display.
How link our marker
If you wish to link your marker to a different URL, like your Google Places listing, you can do so by adding a Listener to your map:
google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
});
Or add an InfoWindow
Instead of linking your marker to an external URL, you might want to add a little ‘Speech Bubble’ style InfoWindow that appears once the marker is clicked. Within this InfoWindow you can also include and style HTML content:
var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
content:"<h3>Snowdown Summit Cafe</h3><p>Railway Drive-through available.</p>" // HTML contents of the InfoWindow
});
google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker
infowindow.open(map,marker); // Open our InfoWindow
});
Adjusting the Controls
Finally, the last features that I wanted to share were the controls. By using the Maps API, you have the ability to even customise the controls of the map from how far users can zoom in, to disabling Street View. Here’s a full list of the common ones I often adjust or disable:
minZoom: 6, // Minimum zoom level allowed (0-20)
maxZoom: 17, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
If you’re pasting the code as you go, make sure that all of these control features are added within the mapOptions variable alongside the initial zoom control we added earlier.
Putting it Altogether
Here’s my complete code from the tutorial, that I’ve also added as a Gist on GitHub.
Additional Reading
We’re only scratching the surface in this tutorial, with what’s possible in V3 of the Google Maps API. To further develop your map and to see what else is possible, i’d recommend following this tutorial on W3 Schools, and also the code samples on the Google Maps API site.
If you have any tips or recommendations for utilising the Google Maps API, please leave them in the comments below. Thank you for checking out my Google Maps API tutorial.
