Tutorial #15
Display a Google Map using JavaScript Intermediate   2013-11-09


To get the most out of Google Maps on your own site you want to use the Maps JavaScript API. This is a complex and sophisticated API. I've included links to Google's own tutorials, examples and documentation at the end of this page.

To get you started, this tutorial walks you though a minimal example that embeds a dynamic map with a marker in a web page. It looks like this:

Demo 1 screenshot for this tutorial

Step by Step

To use the Google Maps API you need a Google Account

1: The first step is to obtain an API key. Go to the Google APIs Console and log in using your Google account.

The API key business is a bit involved but bear with me - you need it here and you'll go through the same process with other Google APIs.

Click Create Project and you will get a page listing loads of APIs. In the top left you should see a pull down marked API Project. Click this and then Rename.... Rename your project to something informative, such as Maps Project. That will help identify projects if you experiment with more than one of the Google APIs.

As of November 2013, Google is testing a new version of this interface called the Cloud Console. So the console may not look quite like this in the future.

Image 1 for this tutorial

2: Click the Services tab and scroll down to the Google Maps API v3 line. Move the switch to ON to activate this service.

Google does charge sites that issue more than 25,000 requests per day - we won't need to worry about that!

Image 2 for this tutorial

3: Pretend to read the Terms of Service page that comes up next and accept the terms. Seriously, if you want to use the API in a commercial application then you need to read the Terms.

You will be sent back the console with all the Services listed.

4: Click the API Access tab in the left side menu. We can use the Simple API Access here. Click Create new Browser key....

Image 3 for this tutorial

5: Specify the web site(s) that you want to use this key with. You want to specify these, otherwise someone else could use your key on their web site.

In my example I'm going to specify any site under the craic.com domain.

Image 4 for this tutorial

6: Google returns with the API Access console page now containing the generated Browser Key.

Image 5 for this tutorial

Because I set this up to only allow access from my sites, there is no problem making this key public.

7: Now we can work with Maps - finally...

Copy the code from the example into your web page and replace YOUR_API_KEY_GOES_HERE with your real API key. Don't surround it with quotes. Make the page available on your web site. You should see the map and be able to interact with it.

This needs to be hosted on a remote site in order to work

Troubleshooting: You should see your map, if you don't then check the JavaScript console in your browser for an syntax errors in your code. If that is all clear then there might be an issue

Understanding the Code

There are four parts to this block of code. The div with id map_canvas, and the style that goes with it, defines the container into which the map will be rendered.

The first script tag loads the Maps API JavaScript code. Your API key configures it to work with your sites. The sensor=false attribute tells the API that you are not accessing the API from a mobile device.

The second script is what specifies our map. The initialize() function first defines an object that holds the coordinates and address of the location that we want to center the map on. You don't need this object but it is a convenient way to handle locations.

The Latitude and Longitude are used to define a google.maps.LatLng object.

The mapOptions object contains three attributes that define the map (there are many others available).

center defines the center of the map and zoom defines how much of the surrounding area is shown. Higher zoom levels produce maps that cover smaller areas of the Earth, as you would expect.

mapTypeId defines the type of map you want, which is a road map in this case.

Next the code creates a google.maps.Map object using the div element and mapOptions.

On to that map we want to place a google.maps.Marker at the desired location on our map and give it an address to use as a label. This example uses the default icon for the marker but you can specify your own images for these.

Finally the script runs the function when the page loads and the map is displayed.

This tutorial is a very simple example of what you can do with the API. I'll write more complex examples in due course, but to really understand the API you want to look at these resources from Google:

Google Maps JavaScript API v3 Tutorial

Google Maps JavaScript API v3 Reference

Google Maps JavaScript Code Samples

Code for this Tutorial

Share this tutorial

Related Tutorials

1 : Embed a Google Map   (Basic)

10 : Embed a Bing Map   (Basic)

19 : Geolocation in HTML5   (Intermediate)

22 : Using Metadata from Photographs   (Advanced)

24 : Geocoding with Google Maps   (Intermediate)

40 : Display KML in a Google Map   (Intermediate)

41 : Display GeoJSON in a Google Map   (Intermediate)

42 : Google Street View Image API   (Basic)

Comment on this Tutorial

comments powered by Disqus