Google Maps API - Core Objects



1. Get the Google Maps API key

Before you start doing any Google Maps API programming, you need to get the API key from Google. Your key will be a long string, something like this:

ABQIAAAAvfBIjFmjSOw6P6CGTw0OvxQ7K1hihcyg_-Y_x6M6VAJs9QC0JhS13daDyBQZRhqRrqiWI1dI6bPo_g

For our examples, we'll use ABCDEF as the key.

2. Load the map script

Here's the simple example of how to use Google Maps on your web page:

<script src="https://maps.google.com/maps?file=api&v=2&key=ABCFEF"
    type="text/javascript">
</script>

The ABCDEF is your API key that you got from Google. Typically, you'd load your javascript code as part of head element of your page.

3. Create the map placeholder

The next step is to allocate a place on the web page for the map to show. Typically, we'd assign the map to a <div> element so that later we can access if from the Document Object Model (DOM):

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

4. Create the GMap object

The JavaScript class that represents the map is GMap2 class. Objects (instances) of this class represent an actual map on your page. You can have multiple maps on the same page by creating an object for each map.

When you create a new instance of the map, you specify the container for that map on the page. That container is a DOM element on the page. In our example, my_map div element is that container:

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

The constructor for GMaps2 looks like this:

GMap2(container, opts?) where container is the DOM placeholder (typically a DIV element) and opts? are optional characters.

5. Initializing the map

We are now ready to setup some parameters for our map. The typical first step would be the location that the map is set to.

  map.setCenter(new GLatLng(37.752927,-122.393741), 13);
  map.setUIToDefault();

Here we set up the center of the map by specifying GLatLng location (more on this later). We also set the zoom level. Setting the center of the map must be the first operation performed on the new map object.

The second line sets up the default set of user controls, such as panning and zoom controls. We'll discuss this later as well.

We'll put this initialization code into a separate function initialize():

<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("my_map"));
        map.setCenter(new GLatLng(37.752927,-122.393741), 12);
        map.setUIToDefault();
      }
    }

</script>

Notice that we use GBrowserIsCompatible() function here to check if the browser is supporting JavaScript necessary to run Google Maps in the first place. Presumably, we'd provide some kind of message to communicate to user if browser is not compatible, but for example purposes we are not going to worry about that here.

6. Load the map

Now that we have the map script loaded, a placeholder to show it and code to configure it, we just need to trigger the creation of the actual map. To do this, we utilize the <body> element's onload() method that will get triggered once the page is being loaded. This is the best practice of initializing the GMap object on your page.

<body onload="initialize()" onunload="GUnload()">

The GUnload() method is there to perform any cleanup that may otherwise cause memory leaks.

Final Map

Here's what our map looks like at the end:

 

 

Here's the code:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script
	src="https://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvfBIjFmjSOw6P6CGTw0OvxQ7K1hihcyg_-Y_x6M6VAJs9QC0JhS13daDyBQZRhqRrqiWI1dI6bPo_g"
	type="text/javascript"></script>
<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("my_map"));
        map.setCenter(new GLatLng(37.752927,-122.393741), 12);
        map.setUIToDefault();
      }
    }

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="my_map" style="width: 800px; height: 600px"></div>
</body>
</html>
Published April 13, 2009