Putting Maps, Images and Data on the Web

Activity: Using Google Maps API

Requirements
Internet Browser, Google Account, Google Maps API key, and access to edit the code of the
webpage you wish to add a map to.

Preparation:
1. Create a Google Account
Navigate to the Create an Account website and enter an email address, a password for logging in,
and agree to the terms and services (you do not need to have a Gmail email account to do this; any
email address can be used).
https://www.google.com/accounts/NewAccount?continue=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fmaps.google.com%2F
%3Fie%3DUTF8%26ll%3D37.0625%2C-
95.677068%26spn%3D47.838189%2C66.708984%26t%3Dh%26z%3D4&hl=en&service=local
Google Account email address:_________________________
Google Account password:____________________________

2. Register for a Google Maps API key

- Navigate to Google Maps API Home Page at http://code.google.com/apis/maps
- On the right side click on “1. Sign up for a Google Maps API key”.

- A new page opens with Terms of Use, highlights, and links on the left side.
(http://code.google.com/apis/maps/signup.html)

1
 Putting Maps, Images and Data on the Web

- Scroll to the bottom of the page. In the gray box at the bottom, check “I have read and agree
with the terms and conditions.
- Next, enter your website URL where you will be embedding your Google Map. Note: if you
have many pages that might use a Google Map but they all reside on the same server, then type in
your basic web address, not the specific page pathname. For example, http://mysite.com will allow
any page created in that mysite root folder to have a Google Map with the same API key. But,
http://mysite.com/myspecificfolder/myspecificpage cannot use the same API key for a page on
http://mysite.com/myotherfolder/myotherpage. There’s no limit to API keys you can register from
the same Google Account and there’s no limit to maps created with the same API key. If you think
you may want more than one map in the future, the more general the URL, the better!
- Click “Generate API key”

2
 Putting Maps, Images and Data on the Web

- You will be prompted for your Google Account Sign in information if you are not currently
signed in. Click “Sign in”.
- This opens a new page with some code on it.

- Open Notepad from your desktop and copy, paste, and save your Key as one file and copy,
paste and save the larger block of “example web page” code as another file.

3
 Putting Maps, Images and Data on the Web

There! You have a Google Maps API!

Google Maps API key URL:____________________________________________

Google Maps API key code filename:______________________________________
Google Maps API key larger block of code filename:___________________________

Activity
1. Getting acquainted with Google Maps API
What is it that you just registered for? API? Key? Where’s the Google Map?
- What you have is a key, or acces code, to the Google Maps API, not the actual API code
itself. This key is specific to your Google Account and the URL you entered on the
registration page. If the key, the Google Account and the webpage URL all match, then you
can “unlock” the Google Maps API and access Google Maps!
- The key will “unlock” the API to allow your webpage to communicate with Google Maps so
you don’t have to! This saves you from re-coding what already exists in Google Maps
(searches, imagery, mapping, etc.). BUT, you will need to recognize a few “vocabulary
words” to get this process to work. It’s helpful to know where help is available online, as well
(most work can be accomplished through copy and pasting code already in existence). For a
complete list of terms, visit:
http://code.google.com/apis/maps/documentation/reference.html
- There is a ton of documentation online to help, as well! Don’t get overwhelmed! A good
place to start is with Google. Open your saved Notepad file of “example web page” code
above to follow along with Google’s explanation of what you have:
http://code.google.com/apis/maps/documentaiton/introduction.html
- You probably will not understand every word…that’s fine! Playing around is the best way to
learn! So before we do much more, let’s get your basic map ready to play with.

2. Build your map

- Open your webpage editing software program on your desktop. CT NEMO uses Adobe
Dreamweaver.
- In your software program, create a new, blank HTML page in the same root folder that we
registered the API to.

4
 Putting Maps, Images and Data on the Web

- If you closed your Notepad file of your “example web page” code, open it again.

- Copy the entire “example web page” code from the text document.
- Return to your webpage editing software program. Paste the code into the code of your new,
blank HTML page.

5
 Putting Maps, Images and Data on the Web

- Go to the “Design View”, if you are in Adobe Dreamweaver, and you should now see an
outline of a box where the Google Map will sit. Congratulations! You have just coded your
first Google Map into your own webpage! It’s that easy!

- Want to actually see the map? Click Preview. You are using your API key to call the imagery
and information from the Google Maps server – this is why your page needs to be online to
see the map.

6
 Putting Maps, Images and Data on the Web

- Save your webpage and put it online with your new code. The next time your webpage is
loaded, a very basic Google Map will appear on your page!

3. Add functionality to your map

The map you have “called” from Google Maps is bare bone. Want to add a scale bar? Want to be
able to zoom in with the roller on your mouse? You have to tell the API to tell Google Maps to do
that with code…but have no fear, that’s just a copy/paste away!
- Let’s go back to the introduction we read earlier:
(http://code.google.com/apis/maps/documentation/introducion.html
and on the left sidebar, click on “Controls” under the Maps API header. (We’re skipping
“Events” because this is coder-speak heavy and not vital right now)
http://code.google.com/apis/maps/documentation/controls.html
- “Controls” are the elements you will add to the map (ie. scale bar) and this page gives you
the vocabulary needed to communicate through your API to get the controls you want.
Follow the documentation and start adding your own controls in the code view of
Dreamweaver. Click Preview in Dreamweaver when you want to test your new controls.
- In your HTML page code, find:

var map = new GMap2(document.getElementById(“map”));

- We will now type in some code directly after this line of code to add controls to the map.
Tell Google Maps to load as a terrain map, not a satellite image by typing in:
map.addMapType(G_PHYSICAL_MAP);
map.setMapType(G_PHYSICAL_MAP);

7
 Putting Maps, Images and Data on the Web

- Add the ability to zoom in and out with your mouse by typing next:
map.enableScrollWheelZoom();

8
 Putting Maps, Images and Data on the Web

- Center the map and set a zoom level where you wish. Note: the latitude and longitude are
recorded in Decimal Degrees with 6 decimal places and a space after the comma. The zoom level
is an integer from 0 to about 21 with 21 being the closest zoom possible:
map.setCenter(new GLatLng(###.######, ###.######), #);

- Don’t know your coordinates? Visit http://itouchmap.com/latlong.html or go to

http://maps.google.com, center the map exactly where you want it by right-clicking where
you want it centered, and selecting Center map here from the dropdown.

9
 Putting Maps, Images and Data on the Web

- In the browser address field at the top of the webpage and type:

Javascript:void(prompt(“”,gApplication.getMap().getCenter()));

- Hit Return. A popup box will appear with the coordinates for the center of the map.

10
 Putting Maps, Images and Data on the Web

4. Add data to your map

You can put your own data on your map in a variety of ways, either by hand (by code) or by
overlaying a KML on the map. In doing this, you are creating a mashup!
- To do this by hand (code) is a bit daunting because it involves adding more than just one
line of code in Dreamweaver, like with the controls. But this code exists to be modified for
your own needs. We will return to the Google documentation and visit the next page,
“Overlays”, to learn what is involved:
http://code.google.com/apis/maps/documentation/overlays.html
- An easier way to do this is to add an overlay of a KML file, if your data already exists as a
KML. This KML can exist online already or in your website directory. To overlay a KML
requires adding two lines of code to your HTML page in Dreamweaver. To learn about how
to write and use a KML/KMZ in your Google Maps API, visit:
http://code.google.com/apis/kml/documentation/mapsSupport.html
- If your KML file already exists and is ready, let’s add to your code view in Dreamweaver
now! Find in your code:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(‘map”));

11
 Putting Maps, Images and Data on the Web

- Between these two lines, type in:

var gx = new GGeoXml (“http://urlpathnameforKML.kml”);

- You have just told your website to recognize and find your KML file. Now you need to tell
the Google Maps API to add it to the map when it loads on your page. Find in your code
view in Dreamweaver:
var map = new GMap2(document.getElementById(‘map”));

12
 Putting Maps, Images and Data on the Web

- After this line, type:

map.addOverlay(gx);

- Notice this is the block of code where you add the controls to the map. For more description
and examples of this, visit:
13
 Putting Maps, Images and Data on the Web

http://code.google.com/apis/maps/documentation/services.html
and click on “KML/GeoRSS Overlays” under “Services” to go to the bottom of the page.
- The next time the webpage is refreshed, your KML will be found and added to the Google
Maps that is served from Google. You’ve completed your mashup!
- To add more complicated features to your page, visit Google documents and click on
“Services”:
http://code.google.com/apis/maps/documentation/services.html
Adding an organization’s logo, a legend or anything else can be done in a similar manner: tell
the website, first, to recognize and find the file, then tell the API to add it as an overlay.
More coding can be done to tell the API where to specifically anchor the file or if it should
move around, but this is also as easy as copy/paste.

5. Make it fancy
- So you have a map with some functions and you’ve added your own data…how is this any
better than Google Maps My Maps? Or MapBuilder? Let’s make it fancy!
- For some ideas and free code to copy/paste, visit:
http://code.google.com/apis/maps/documentation/examples/index.html
- For demonstrations, visit:
http://code.google.com/apis/maps/documentation/demogallery.html
- Things that are covered in these demonstrations include: toggling a KML file on and off,
adding search fields, adding statistics, changing the map type, adding driving directions,
adding Streetview, and adding traffic information.
- Now you’re ready to visit Google Maps API FAQ for more information:
http://code.google.com/support/bin/topic.py?topic=10028
- From within Google Maps API FAQ there are a handful of tutorials that will help you get
even fancier (linking to a database table, geocoding addresses, allowing user-contribution and
more). Visit:
http://code.google.com/support/bin/topic.py?topic=11364

Extra Credit: More Reading, Review and Online Help

- Official Google Maps API home page for basic set-up and tutorials –
http://code.google.com/apis/maps
- Official Google Maps API documentation for code references, how-tos, examples and KML
help – http://code.google.com/apis/maps/documentation
- Official Google Blog – http://googlemapsapi.blogspot.com
- Official Google Group – http://groups.google.com/Google-Maps-API

14
 Putting Maps, Images and Data on the Web

- For an almost completely comprehensive list of links to examples and tutorials (it includes
almost all non-Google sites I have found useful), visit -
http://groups.google.com/group/Google-Maps-API/web/links-to-examples-tutorials
- A non-Google Tutorial – http://econym.googlepages.com
- Google Maps Mania blog for more help, ideas and troubleshoot –
http://googlemapsmania.blogspot.com/
- Wikipedia – http://en.wikipedia.org/wiki/Google_Maps
- “50 things you didn’t know you could do with google maps” for some help and ideas -
http://www.virtualhosting.com/blog/2008/top-50-things-you-didnt-know-you-could-do-
with-google-maps/
- To learn more about PHP and Google Maps, visit - http://googlemapsbook.com/book/

Best of luck! Enjoy, have fun, and you can always go back to MapBuilder for assistance!

15