This is How You Use the Google Maps API – screencast

So your client emails you and asks, “Can you put one of those flashy maps on my contact page so that users can actually see our building from a satellite’s view?”. You’ve used Google maps many times, but there is only one problem: you have no idea how to use the API. Well get out your spoon and dig in!

Step 1: Obtain a Unique API Key

If you were to download the source code that is provided with this article, you would find that it doesn’t work on your website. The reason is because Google requires all users to obtain a unique “API key” for each site that implements Google maps.

Never fear. It’s 100% free and takes about thirty seconds to sign up. First, visit Google’s sign up page and enter the url of your website. Don’t worry about adding a specific path. The root url will cover every page that is part of that domain. Agree to the terms and conditions and click “Generate API”.

That’s it! The page that you’ve been redirected to contains your unique key as well as a sample page – to serve as a crash course. Your key will look something like:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

You’ll also find a script path that will look like:

<script src="http://maps.google.com/maps?file=api&v=2ampkey=ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdI5Odvw" type="text/javascript"></script>

Yours will be different from mine because it will contain your own specific key value. Copy this and paste it into the head portion of your document.

You might want to bookmark the link to the API documentation. You’ll undoubtedly be referencing it as your skills progress.

Step 2: Setting Up Your HTML

For the sake of simplicity, we’ll create a bare bones layout. Add the following within the body element of your document.

In a real world situation, you should move the styling to an external file (like I did in the video). The height and width values will by used by the API to determine the dimensions of your map. Don’t worry, nothing will be clipped off.

Step 3: Javascript

Next, add the following to your Javascript file. Review it a bit and then continue on.

$(function() { // when the document is ready to be manipulated.
  if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's
    var map = document.getElementById("myMap"); // Get div element
    var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
    m.setCenter(new GLatLng(36.158887, -86.782056), 13); // pass in latitude, longitude, and zoom level.
  }
else {alert("Your browser is not worthy.");}
});

To take this code line by line:

• When the document is ready to be manipulated, run the code within.This is a jQuery syntax, but jQuery isn’t required in the least. You could also simply add an “onLoad()” attribute to your body element – though this is messy.
• If the browser that the user is accessing the map from isn’t compatible with the API, then show an alert (see bottom). Otherwise, run the code within.
• Create a variable called “map” and tell it to find the div that will contain the map.
• Next, create a variable called “m” and make it equal to a new instance of the “GMap2″ class. Within the parenthesis, pass in the “map” variable that you just created previously
• Finally, set a center point so that the map knows what to show. To do this, we create a new instance of the “GLatLng” class and pass in the latitude and longitude values. You can go here to grab the appropriate values. In my case, I’ve set the coordinates to my home town. After that, you can optionally input a zoom level – which I’ve set to the standard ’13′.

This code alone will give you a basic map that might be completely appropriate for your needs. However, if you’d like to also implement “zoom” and “map mode” features, read on.

Step 4: Refining Our Map

There are literally dozens of features that you can add to your map. We’ll go over a few of them. First, we’ll implement a zoom bar that will allows the users to incrementally zoom in or out.

m.addControl(new GLargeMapControl())

Here, we’re taking our map and are adding a new control called “GLargeMapControl”.

Next, let’s add a feature that will allow the users to choose which map mode they desire – Normal, Satellite View, or a hybrid.

var c = new GMapTypeControl(); // switch map modes
m.addControl(c);

• Create a variable called “c” and make it equal to a new instance of the “GMapTypeControl” class.
• Add a new control, and pass in “c”.

If you refresh your browser, you’ll see that the user nows has the option to choose his viewing mode. But what if you want to set the default mode? In such instances, you would use “setMapType”.

m.setMapType(G_SATELLITE_MAP);

When defining the default mode, you have three choices.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

You’re Finished!

That wasn’t too hard, was it? There are a few specific class names that you’ll need to memorize, or jot down for later reference. But other than that, it’s strikingly simple to implement such an advanced map into your websites.

For you template designers, why not implement this into one of the themes that you sell on ThemeForest?

A few days ago, we posted a tutorial that shows you how to combine many APIs – including Google maps. But many of you didn’t know enough to get started. Hopefully, this will help. After you’ve wrapped your head around this API, why not save yourself some headaches and enlist the help of a PHP class called Phoogle? I think it’s best to learn the right way first, but now that you have…cut some corners! See you next week.

Additional Resource

• 

  How to Create a Mashup By Combining 3 Different APIs

  This tutorial will show you how to create a mashup of three different APIs including integration with Google Maps.

  Visit Article

• Subscribe to the RSS Feed and the Video Feed for more daily web development tuts and articles.