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=http%3A%2F%2Fmaps.google.com%2F %3Fie%3DUTF8%26ll%3D37.0625%2C95.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. then type in your basic web address. the more general the URL. not the specific page pathname. http://mysite. the better! Click “Generate API key” 2 .com/myotherfolder/myotherpage. But. Next. If you think you may want more than one map in the future.com will allow any page created in that mysite root folder to have a Google Map with the same API key. Note: if you have many pages that might use a Google Map but they all reside on the same server. check “I have read and agree with the terms and conditions. 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. In the gray box at the bottom. http://mysite.com/myspecificfolder/myspecificpage cannot use the same API key for a page on http://mysite. For example. enter your website URL where you will be embedding your Google Map. Images and Data on the Web - - Scroll to the bottom of the page.

Putting Maps. This opens a new page with some code on it. - Open Notepad from your desktop and copy. 3 . and save your Key as one file and copy. paste. Click “Sign in”. paste and save the larger block of “example web page” code as another file. Images and Data on the Web - You will be prompted for your Google Account Sign in information if you are not currently signed in.

Getting acquainted with Google Maps API What is it that you just registered for? API? Key? Where’s the Google Map? . For a complete list of terms.Putting Maps.Open your webpage editing software program on your desktop. CT NEMO uses Adobe Dreamweaver. 2.There is a ton of documentation online to help. to the Google Maps API. not the actual API code itself. 4 . 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. 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.com/apis/maps/documentation/reference. you will need to recognize a few “vocabulary words” to get this process to work. etc. imagery.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.com/apis/maps/documentaiton/introduction. . the Google Account and the webpage URL all match.What you have is a key. as well! Don’t get overwhelmed! A good place to start is with Google.html . blank HTML page in the same root folder that we registered the API to. then you can “unlock” the Google Maps API and access Google Maps! . let’s get your basic map ready to play with.).html . BUT.google. as well (most work can be accomplished through copy and pasting code already in existence). create a new. or acces code. This key is specific to your Google Account and the URL you entered on the registration page. If the key.You probably will not understand every word…that’s fine! Playing around is the best way to learn! So before we do much more. mapping. It’s helpful to know where help is available online. Build your map . visit: http://code.In your software program.

5 . Paste the code into the code of your new.Putting Maps. Return to your webpage editing software program. blank HTML page. 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.

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. if you are in Adobe Dreamweaver. and you should now see an outline of a box where the Google Map will sit.Putting Maps. Images and Data on the Web - Go to the “Design View”. 6 . 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.

click on “Controls” under the Maps API header. find: var map = new GMap2(document.In your HTML page code. Images and Data on the Web Save your webpage and put it online with your new code. 7 .getElementById(“map”)). scale bar) and this page gives you the vocabulary needed to communicate through your API to get the controls you want.addMapType(G_PHYSICAL_MAP). Tell Google Maps to load as a terrain map.Let’s go back to the introduction we read earlier: (http://code. Add functionality to your map The map you have “called” from Google Maps is bare bone. Follow the documentation and start adding your own controls in the code view of Dreamweaver. that’s just a copy/paste away! . map. Click Preview in Dreamweaver when you want to test your new controls.google.“Controls” are the elements you will add to the map (ie.html and on the left sidebar.com/apis/maps/documentation/introducion.google. . not a satellite image by typing in: map. (We’re skipping “Events” because this is coder-speak heavy and not vital right now) http://code.setMapType(G_PHYSICAL_MAP).Putting Maps.com/apis/maps/documentation/controls. - We will now type in some code directly after this line of code to add controls to the map.html . a very basic Google Map will appear on your page! 3. 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. The next time your webpage is loaded.

Putting Maps.enableScrollWheelZoom(). 8 . Images and Data on the Web - Add the ability to zoom in and out with your mouse by typing next: map.

9 .######).Putting Maps.######. ###.setCenter(new GLatLng(###. and selecting Center map here from the dropdown. Note: the latitude and longitude are recorded in Decimal Degrees with 6 decimal places and a space after the comma. #).com/latlong.com.html or go to http://maps. center the map exactly where you want it by right-clicking where you want it centered. The zoom level is an integer from 0 to about 21 with 21 being the closest zoom possible: map. Images and Data on the Web Center the map and set a zoom level where you wish.google. - Don’t know your coordinates? Visit http://itouchmap.

gApplication. - Hit Return.Putting Maps. 10 .getMap().getCenter())). A popup box will appear with the coordinates for the center of the map. Images and Data on the Web - In the browser address field at the top of the webpage and type: Javascript:void(prompt(“”.

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

12 . Images and Data on the Web Between these two lines.kml”). Now you need to tell the Google Maps API to add it to the map when it loads on your page.Putting Maps.getElementById(‘map”)). type in: var gx = new GGeoXml (“http://urlpathnameforKML. - You have just told your website to recognize and find your KML file. Find in your code view in Dreamweaver: var map = new GMap2(document.

addOverlay(gx). - Notice this is the block of code where you add the controls to the map. visit: 13 . type: map.Putting Maps. For more description and examples of this. Images and Data on the Web - After this line.

google.google. then tell the API to add it as an overlay. changing the map type.com/apis/maps/documentation .com/support/bin/topic.com/apis/maps/documentation/services.py?topic=11364 Extra Credit: More Reading.Official Google Maps API documentation for code references. 5. adding Streetview.com/apis/maps/documentation/examples/index.html Adding an organization’s logo. Now you’re ready to visit Google Maps API FAQ for more information: http://code.com/support/bin/topic.html and click on “KML/GeoRSS Overlays” under “Services” to go to the bottom of the page.com/apis/maps/documentation/demogallery.Official Google Blog – http://googlemapsapi.com/Google-Maps-API - 14 .com/apis/maps . examples and KML help – http://code. The next time the webpage is refreshed.Official Google Group – http://groups.html For demonstrations. first.html Things that are covered in these demonstrations include: toggling a KML file on and off.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.google. a legend or anything else can be done in a similar manner: tell the website. adding driving directions.blogspot.com/apis/maps/documentation/services. You’ve completed your mashup! To add more complicated features to your page.google.google.Official Google Maps API home page for basic set-up and tutorials – http://code. and adding traffic information. Review and Online Help . adding statistics. Images and Data on the Web http://code.google. allowing user-contribution and more).com . geocoding addresses. Visit: http://code. but this is also as easy as copy/paste. to recognize and find the file. visit: http://code. More coding can be done to tell the API where to specifically anchor the file or if it should move around. how-tos. adding search fields.google. visit: http://code.google.Putting Maps.google. your KML will be found and added to the Google Maps that is served from Google. 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 Google documents and click on “Services”: http://code.

com/book/ - - Best of luck! Enjoy.org/wiki/Google_Maps “50 things you didn’t know you could do with google maps” for some help and ideas http://www. visit http://groups.blogspot.googlepages.com/blog/2008/top-50-things-you-didnt-know-you-could-dowith-google-maps/ To learn more about PHP and Google Maps.wikipedia.http://googlemapsbook.google.Putting Maps. and you can always go back to MapBuilder for assistance! 15 .com Google Maps Mania blog for more help. have fun. ideas and troubleshoot – http://googlemapsmania. visit .com/ Wikipedia – http://en.com/group/Google-Maps-API/web/links-to-examples-tutorials A non-Google Tutorial – http://econym. 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).virtualhosting.

Sign up to vote on this title
UsefulNot useful