Activity: Using Google Maps API

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

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


3

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


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


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

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


7

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


8

- Add the ability to zoom in and out with your mouse by typing next:

map.enableScrollWheelZoom();


9

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


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

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


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


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 description

and examples of this, visit:


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


15

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

Documents

Activity: Using Google Maps API