Google Maps API - Getting Started

The google maps api is great, there's a lot you can do with it and even with the simplest of creations give your website look quite professional.

For example, you may have a map of your businesses location on a static map as an image.
I don't care how fancy you've made the image look, using the google amps api will make it look better.

In this article I'll go over a quick example of how to set up a very basic google map to put on your website.

The first thing you'll need to do is get yourself a google maps api key, this is simply a key code that tells google who you are, so they have a little bit of control over who uses their api and can monitor it's usage.
You can get yourself a google maps api at the following link:

http://code.google.com/apis/maps/signup.html

It's pretty simple, you just need a google account.
There is no limit to the number of pageviews your map may recieve, but if you use geocoding (And presumably reverse geocoding), then there is a 15,000 geocoding request limit in any 24 hour period.
Though 15,000 requests per day may seem a lot, you never know when your application will get reckognized and used by many people. There are ways around this that I'll discuss in a later article.

You can create a google map in 2 ways, either embedding it into your page, or calling it with the google maps api.
If you're not well versed with javascript, or have very simple requirements, you could use googles wizard which will create the map for you, based on the paramaters you specify such as, width, height, zoom and address.
This method is a little restrictive, as you can't manipulate the map any further once it's on your website, however it's quite a bit easier and quicker to create than calling the google maps api, but if you have simple requirements, then this is absolutely fine.
If you would like to use the simple wizard then you can find it here:

http://www.google.com/uds/solutions/wizards/mapsearch.html

The rest of this tutorial will cover the alternative method by calling the google maps api.

The first thing you need to do is place a link to the google maps api in the head of your page such as below (Replacing "YourKeyHere" with your google maps api key):

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourKeyHere">
</script>

The "sensor=false" is quite an important part, it basically means "I'm not using a sensor to find the end user's location". It's a requirement, if you're not gethering the user's location while they're using your google maps application, the set sensor=false, if you are, then set sensor=true. If you were creating this for a mobile device such as an iphone, then perhaps it's necessary for you to grab their location, if you want to show them all mcDonalds within 1 mile of their current location.

Next we have some more javascript which can either be embedded in to the header of a single document (As is displayed below), or referenced from an external file (Which is my preferred method).

<script type="text/javascript">
function initialize(){
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.421844, -122.084026), 13);
map.setUIToDefault();
}
}
</script>

The initialize() function is simply a function that is intended to run when the page loads.
GBrowserIsCompatible() is a google maps api method the checks to see if the user's browser is compatible with google maps, if it is, run the following code, if it's not, do nothing i.e. the map wont attempt to load (It may be a good idea to write some javascript in an "else" statement to make the user aware that they need to use a different browser).
Var map is assigning a variable to a new GMap2 object (i.e. the map your creating), which places the map in a div with an id of "map_canvas" (Or whatever you prefer to call the div you choose to place the map in).

setCenter is a google maps api method which you're applying to the "map" variable you created earlier, it centers the map on whatever location you specify, in my example, I've provided the latitude and longitude of the Googleplex in California. You also need to specify the default zoom level in your setCenter method.
I should mention that GLatLng is a google maps api method which requires a latitude and a longitue.

map.setUIToDefault(); simply sets the user interface (Such as zoom slider, and map controls (map/satellite/hybrid/terrain)) to the default settings, you can choose to manually disable specific parts of the user interface if you wish.

In the <body> tag, we need to call the initialize() function onload like so:

<body onload="initialize()">

My personal preference would be to use jquery in an external file to handle this (See How To Execute Javascript When The Document Is Ready), but I'll keep it simple for the sake of this example.

Now the last thing to do is to create a div with an id of "map_canvas" (Or whatever you decided to name your map div) and add height and width dimensions to it, like so:

<div id="map_canvas" style="width: 400px; height: 400px"></div>

You should really specify it's dimensions in an external file, unless you expect to create many different maps of various dimensions (Which isn't particularly likely).

Below is my version based on the code above:

So that's how you make a basic google map from the api, below is a slightly modified version of what I've described above that was taken from the google coding playground that you can use to make understanding it a little easier:

<!--

copyright (c) 2009 Google inc.


You are free to copy and use this sample.

License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps API Sample</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YourKeyHere"></script>

<script type="text/javascript">


function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById( "map_canvas"));

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

}

}


</script>

</head>

<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">

<div id="map_canvas" style="width: 500px; height: 300px"></div>

</body>
</html>

If you enjoyed this article, please consider giving it a +1

Tags: google maps api, google maps, api, javascript

Published: 4/27/2014 1:24:32 PM
By: Stephen Warren