Scribd
Upload
59 views8 pages

Google Maps For Your Apps! Basic Google Maps Exercise

This document provides instructions for a basic exercise to create a Google Maps application using JavaScript. It outlines 5 steps: 1) acquiring a Google Maps API key, 2) creating basic HTML and JavaScript files, 3) generating a basic map, 4) adding map controls, and 5) adding markers and info windows. The exercise teaches fundamental coding techniques for placing a map on a web page, customizing controls, and adding points of interest with additional information.

Uploaded by

Francisco Feitosa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
59 views8 pages

Google Maps For Your Apps! Basic Google Maps Exercise

This document provides instructions for a basic exercise to create a Google Maps application using JavaScript. It outlines 5 steps: 1) acquiring a Google Maps API key, 2) creating basic HTML and JavaScript files, 3) generating a basic map, 4) adding map controls, and 5) adding markers and info windows. The exercise teaches fundamental coding techniques for placing a map on a web page, customizing controls, and adding points of interest with additional information.

Uploaded by

Francisco Feitosa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 8

Google Maps for Your Apps!

Basic Google Maps Exercise

In this exercise for our Google Maps for Your Apps! e-learning course you will apply
the concepts you learned in the lecture portion of the class using a hands on programming
task designed to teach you basic coding techniques for creating a Google Maps web
application. We will use the JavaScript programming language for this exercise. It is
beyond the scope of this course and exercise to cover this language in details, but there
are many good web and print references that can get you up to speed pretty quickly.

Step 1: Acquire a Google Maps API key


The first step in creating a Google Maps application is to sign up for an API key.
However, before you can sign up for the API key, you will need to have a Google
Account. A Maps API key is valid for a single directory or domain. For most
applications, Google recommends that you register a domain name. Your key is valid for
that domain, its sub-domains, all URLs on hosts in those domains, and all ports on the
hosts.

If you are developing on a local drive (file://), the key check is skipped in the Google
Maps Javascript API. For example, during the development of an application it is fairly
common practice to save the files somewhere on your local drive. In this case it is
unnecessary to include the Google Maps API key. When you eventually release the
application on the Internet or your local intranet you will need to place the key inside
your application file. For the purposes of the exercises we will complete in this class you
will be saving your files to the http://<host>/gmaps/exercises directory. If, as was
suggested in the exercise setup instructions, you are using a local copy of the Apache web
server this would be http://localhost/gmaps/exercises.

Determine the domain where you will store your application and for future
reference write it below.

Domain: ____________________________________________

Login to your Google Account or sign-up for an account

Obtain a Google Maps API key

Step 2: Very Basic HTML and JavaScript


For purposes of this exercise we are providing a very simple html file that you will use to
complete the steps in this exercise. You will add your Javascript code to this file in the
form of <script> tags.

Find the file called GMapsExercise.htm which is located in your


http://<host>/gmaps/exercises folder.
Open the file in your HTML editor (Dreamweaver, Frontpage, etc). If you dont
have an HTML editor there is a great, free editor called Nvu that you can
download and install. Click here to get more information on Nvu. You can also
use a text editor such as jEdit, Wordpad, or Notepad.

This file contains very basic HTML. For now youll want to pay attention to the
line:

The <div> tag will serve as a container for our Google Map. Notice that the <div
tag is assigned an id of map_canvas. Well refer to this identifier in the next
step when we create our map.

Click here to get more information on the <div> tag

Step 3: Create a basic Google Map


In this step youll add in some JavaScript code that references the Google Maps API to
create a basic Google Map.

If you havent already done so, open the GMapsExercise.htm file in your HTML
editor.
Our first step is to add a reference to the Google Maps API and provide the key
that you generated in Step 1. Add in the following code block inside the <head>
tag:

The <script> tag simply indicates that the content contained within the tag will be
executed as a script when the page is loaded unless it is contained within a
function. Code contained within a function is executed only when called from
elsewhere in the page. The src attribute defines a URL to the file containing the
Google Maps API. We are using version 2 of the Maps API which is indicated
with the v=2 parameter.

Make sure that you change the setting <your key value here> to whatever key
value was generated in Step 1.

Next, youll create a second script tag within the file which will contain a function
that creates and centers your map. Add in the following code block just below the
script tag you have already created.
Let me quickly describe what this code does. In this script we define a function
called initialize. Recall that a JavaScript function is not executed until called so
this code block will not execute until specifically called by another function.
Well see how that works in just a moment. Inside the function we test to make
sure the browser that is being used to display the map is compatible with the
Google Maps API through the use of the GBrowserIsCompatible function.
Assuming that this function returns a true value then we create a new variable
called map which holds a new instance of a Google Map which is created through
the constructor to GMap2. Notice here that we refer to the element
map_canvas. Youll recall that in Step 2 when we created our <div> tag we
identified the <div> tag with an id of map_canvas. What this line of code does
is create the map and tell the browser to place the map inside the <div> container.
Finally, we center the map through the setCenter function which accepts a
latitude/longitude value and a map scale which we set to 13.

At this point weve created the bulk of the code necessary for creating our first
map. However, remember that our initialize function will not execute unless
called from another function. We can do this through the onload event of a page
which is located inside the <body> tag. Add the following code inside your
<body> tag so that it appears as follows:

What does this do? When your page first renders the onload event is fired which
points to our initialize function. The initialize function then creates and centers
the map, and places it inside the <div> tag. The onunload event calls the
GUnload Google Maps function. This function cleans up problems associated
with memory leaks.

Save your file, start your web browser, and open the GMapsExercise.htm file.
You should see the following:
Feel free to experiment with the initialize function by setting a different center point and
or scale for the map.

Step 4: Adding and altering map controls


In Step 3 you created a very basic map. However, you probably noticed that the map
didnt include any controls for zooming, panning, or changing the map type. In this step
you will learn how to add these controls to your map.

If you havent already done so open the GMapsExercise.htm file in your HTML
editor. We are going to add to the existing code that you created in Step 3.

The code that you add in this step will be placed inside the existing initialize
function. Add the following two lines of code just below the map.setCenter line:

The first line of code adds a large map control that your user can use for zooming
and panning while the second line of code adds the various map types (Map,
Satellite, Terrain) buttons to your map.

Save your file, start your web browser, and open the GMapsExercise.htm file.
You should see the new controls that have been added to your map.
Replace GLargeMapControl with GSmallMapControl. Save the file and refresh
the map in your browser to see the difference.

Want to remove panning capabilities available through the controls? Replace


GSmallMapControl with GSmallZoomControl. Save the file and refresh the map
in your browser to see the difference.

Try adding in the scale bar control and overview map control by adding in two
new lines of code below the existing code that you have created in this step. Save
the file and refresh the map in your browser to see the difference.

Now lets experiment with the various map types that are available to you.
Youve already seen how to add in the Map, Satellite, and Hybrid map types.
However, you can also add in a Terrain map type. Add in the following line of
code, save, and refresh your browser to see the changes:

For more information on the various types of controls that are available please click here.

Step 5: Add markers and info balloons


In Step 5 youll learn how to add markers and info balloons to your map.

If you havent already done so open the GMapsExercise.htm file in your HTML
editor. We are going to add to the existing code that you created in Step 4.
Lets start by adding a marker to your map. In most cases you will be adding
more than one marker to your map, but for now well add only a single marker so
that I can illustrate the code that youll use to add these features to your maps. It
is common to add multiple markers to a map and normally this data is read from a
database server or perhaps an XML file as well see in a later exercise.

Below the existing code that you have written add the following lines of code.

Save the file and refresh your browser to see the marker that has been added to
your map. The first line of code created an instance of GLatLng that is associated
with a particular geographic point. Next, we create a new variable called
marker which is used to hold an instance of GMarker. This marker is placed at
the GLatLng coordinate we specified in the first line of code. Finally, we use the
GMap2.addOverlay method to add the marker to the map.

Next, well add an info balloon to the marker so that it displays information when
clicked.

Were going to use a simple Html window type in this exercise, but understand
that there are several different types of info windows that you can add to your
application and the content can be quite diverse. Add the following line of code
beneath the existing code that you just created.

Save the file and refresh your browser to see the marker that has been added to
your map.

Step 6: Responding to events


In Step 6 you are going to learn how to respond to events in Google Maps. Events can be
a little difficult to understand for new programmers so some explanation is in order.
Events can be described as actions that take place within an application. Typically these
actions are invoked by the user and could include things such as clicking a point on the
map, dragging the map in a panning operation, and changing map types from map to
satellite. These are all examples of user generated events. In any case, an event is a user
or system generated action. You can write application code that responds to these events
in some way. For example, when the user clicks the map, you could add a GMarker at
the point where the user clicked. Another example could include displaying the latitude,
longitude coordinates where the user clicked the map.

Find the exercise file called GMapsExerciseEvents.htm which is located in your


http://<host>/gmaps/exercises folder and open with your favorite HTML editor.
Enter your Google Maps API key where indicated.

Some of the code for this particular exercise has already been written for you.
What you will be doing is adding an event function that responds to a user action.
In this case, our event will respond to a mouse drag that pans the map.

With the Google Maps API, all events are registered through the GEvent class.
Several objects in the Maps API including GMap2 and GMarker can respond to
events, but the actual event is registered with the GEvent class. This is done
through the addListener method on GEvent. Add in the following code block
below the map.setCenter line and then well talk about what is accomplished with
this code.

The addListener method takes three arguments. The first is a reference to an


object which in this case is an instance of GMap2 referenced by the variable
map. The second parameter is the event that will be registered which is the
moveend event. The final argument is the function that will be run in response
to the event being fired. So, in this case were saying that wed like to run the
function included in the code block every time that a user drags the mouse on the
map. Moveend simply means that the event isnt triggered until the user has
released the mouse on the drag. For a full list of events please click here and
scroll down to the events section.

Save the file and load it in your browser. Pan the map by clicking the mouse and
dragging in any direction. The latitude/longitude coordinates will be displayed
just below the map in <div> tag. See the figure below for an example of how the
coordinates are displayed below the map.

You might also like