Académique Documents
Professionnel Documents
Culture Documents
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)
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. Theres no limit to API keys you can register from the 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
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.
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 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 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 good place to start is with Google. Open your saved Notepad file of example web page code above 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 to learn! 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 Adobe Dreamweaver. - In your software program, create a new, blank HTML page in the same root folder that we registered the API to.
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.
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! Its 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.
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 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 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);
Add the ability to zoom in and out with your mouse by typing next: map.enableScrollWheelZoom();
Dont 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.
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
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, lets add to your code view in Dreamweaver now! Find in your code: if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(map));
11
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
Notice this is the block of code where you add the controls to the map. For more description and examples of this, visit:
13
14
Best of luck! Enjoy, have fun, and you can always go back to MapBuilder for assistance!
15