activity google maps api

8/6/2019 Activity Google Maps API

1/15

Putting Maps, Images and Data on the Web

1

Activity: Using Google Maps API

Requirements

Internet Browser, Google Account, Google Maps API key, and access to edit the code of thewebpage 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=http%3A%2F%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)


2/15


2

- Scroll to the bottom of the page. In the gray box at the bottom, check I have read and agreewith the terms and conditions.

- Next, enter your website URL where you will be embedding your Google Map. Note: if youhave 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. Theres no limit to API keys you can register fromthe same Google Account and theres 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


3/15


3

- You will be prompted for your Google Account Sign in information if you are not currentlysigned 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.


4/15


4

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? Wheres the Google Map?

- What you have is a key, or acces code, to the Google Maps API, not the actual API codeitself. 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 soyou dont 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. Its 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! Dont get overwhelmed! A goodplace to start is with Google. Open your saved Notepad file of example web page codeabove to follow along with Googles explanation of what you have:

http://code.google.com/apis/maps/documentaiton/introduction.html

- You probably will not understand every wordthats fine! Playing around is the best way tolearn! So before we do much more, lets get your basic map ready to play with.

2. Build your map

- Open your webpage editing software program on your desktop. CT NEMO uses AdobeDreamweaver.

- In your software program, create a new, blank HTML page in the same root folder that weregistered the API to.


5/15


5

- 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.


6/15


6

-

Go to the Design View, if you are in Adobe Dreamweaver, and you should now see anoutline of a box where the Google Map will sit. Congratulations! You have just coded your

first Google Map into your own webpage! Its that easy!

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

see the map.


7/15


7

- Save your webpage and put it online with your new code. The next time your webpage isloaded, 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 beable to zoom in with the roller on your mouse? You have to tell the API to tell Google Maps to do

that with codebut have no fear, thats just a copy/paste away!

- Lets 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. (Were skippingEvents 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 youthe 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 ofDreamweaver. ClickPreview 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);


8/15


8

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


9/15


9

- Center the map and set a zoom level where you wish. Note: the latitude and longitude arerecorded 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(###.######, ###.######), #);

- Dont know your coordinates? Visit http://itouchmap.com/latlong.html or go tohttp://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.


10/15


10

- 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.


11/15


11

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 oneline 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 aKML. 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, lets add to your code view in Dreamweavernow! Find in your code:

if (GBrowserIsCompatible()) {

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


12/15


12

- 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 tellthe 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));


13/15


13

- After this line, type:map.addOverlay(gx);

- Notice this is the block of code where you add the controls to the map. For more descriptionand examples of this, visit:


14/15


14

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. Youve completed your mashup!

- To add more complicated features to your page, visit Google documents and click onServices:http://code.google.com/apis/maps/documentation/services.html

Adding an organizations 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 youve added your own datahow is this anybetter than Google Maps My Maps? Or MapBuilder? Lets 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 youre 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 geteven 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 KMLhelp http://code.google.com/apis/maps/documentation

- Official Google Blog http://googlemapsapi.blogspot.com- Official Google Group http://groups.google.com/Google-Maps-API


15/15


15

- For an almost completely comprehensive list of links to examples and tutorials (it includesalmost 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 didnt 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!

activity google maps api

Documents