|
|
|
checkout google sitemaps on the functionality on the maps
http://googlemapsapi.blogspot.com/
"Tutorial: Creating Your First Map
Pamela Fox, Google Maps API Team
August 2007
Goal
This tutorial guides you through the steps of creating your first working map using the Google Maps API. It covers publishing the map online on a Google Pages account, and customizing it to show the location of your choice, complete with marker and info window.
Time to Complete
Approximately 60 minutes
Prerequisites
Before you begin this tutorial, you must have the following:
A GMail account
A basic knowledge of HTML
A basic knowledge of JavaScript
Index
This tutorial is divided into the following sections:
Section 1: Setting Up a Google Pages Account
Section 2: Getting a Working Map Online
Section 3: Finding the Latitude/Longitude of Your Location
Section 4: Customizing the Map
Summary
Section 1: Setting Up a Google Pages Account
For the purposes of this tutorial, we will be using Google Pages to host the map page(s) you create. You can certainly host your map on your own server as well. If you are already familiar with Google Pages or are using your own server, you can skip this section and go to Section 2.
Sign in to http://pages.google.com with your GMail account. If it's your first time using Google Pages, you'll be presented with the Terms & Conditions page. Please read the info and accept the terms to continue.
You'll then see the interface that will allow you to create a new page. Besides providing a WYSIWYG HTML editor, Google Pages also allows you to upload pages from your hard drive. We'll use that option to upload HTML we create outside of Google Pages. On the Edit page, click 'Back to Site Manager' and the Site Manager page appears.
You should now see the Site Manager interface. It consists of pages you've created with the page editing interface on the left, Uploaded Stuff on the right, and your site's unique URL in the upper left. Keep this page open for later in the tutorial.
Section 2: Getting a Working Map Online
To include a Google map on an online site, you'll need an API key which is tied to your site URL and your GMail account. First, visit http://www.google.com/apis/maps/signup.html. Make sure to read through the terms of use — there are some uses of the Maps API which are not allowed that you should be aware of.
Enter the URL for your Google Pages account in the 'My web site URL' box. This is the same URL that is shown at the top of your Site Manager, as circled in the screenshot from step 4 of Section 1. It should be a domain name like http://<username>.googlepages.com. Check the box indicating you agree with the terms, then press the 'Generate API Key' button.
You should now see the sign-up thank you page, which tells you your key (a long string of random characters), the directory/domain it's valid for, and sample code for your first map which includes your API key. You can see the API key appended to the end of the script tag that loads the Maps API into the page. Keep this page open in your browser.
Open a text editor like Notepad on Windows or TextEdit on Macs. Copy and paste the HTML from the thank you page into a blank document, and save it as mymap.html.
Go back to the Google Pages Site Manager we left open from Step 4 of Section 1. Click the 'upload' link at the bottom of Uploaded stuff.
Click 'Browse' and you'll be greeted with a file explorer. Find where you saved mymap.html and select it.
You'll see a brief indicator while the file is uploading. When the file has successfully uploaded, you'll see a file size next to it and a trash can (which you can use to delete it later).
It's time to test it out! Click on the 'mymap.html' link listed in Uploaded Stuff, and you'll see a browser window open up to http://<username>.googlepages.com/mymap.html. If you did all the steps correctly, you should now see a map centered on Palo Alto, California like this one:
http://maps.examples.googlepages.com/mymap.html
If you're getting an error about the key being registered for a different site, then you probably entered in the wrong URL when you signed up for the API key. Go back to Step 2 of this section and make sure you enter the domain name that you see in the browser window for the page.
If you're not seeing a map and are just seeing a blank page, you probably made a copy & paste error. Go back to Step 4, and make sure you copy and paste all and only the HTML given to you in the textbox.
Section 3: Finding the latitude/longitude of your location
The first customization that you'll want to make to the map is to center it at the location of your house, business, etc. To do this, you'll need to know the latitude and longitude of that location, but you probably only know the address right now. The process of turning an address into a set of coordinates is known as geocoding, and it's what maps.google.com does when you enter an address. Since maps.google.com has one of the best geocoders around, we'll use it in this workshop to turn your address into a latitude/longitude.
Visit http://maps.google.com.
Enter the address of your location in the text box, and press the 'Search Maps' button. If your address is found, a marker is placed at the location. If your search criteria produces multiple matches, then you're asked to select the best match.
Geocoding an address is not an exact science, and sometimes Google Maps will not get the exact location of an address — the green marker may show up in the middle of the street, slightly down the road, etc. All you need to do is double-click on the map exactly where you'd like the coordinates for. The map should re-center itself on the double-clicked location.
Once you're happy with the location of the map center, it's time to retrieve the coordinates. Click on 'Link to this page' and a box will pop up with a URL that looks something like:
http://maps.google.com/maps?f=q&hl=en&q=3650+McClintock+Ave+Los+Angeles+CA&sll=34.019963,-118.290047&sspn=0.00482,0.006856&ie=UTF8&ll=34.019968,-118.289988&spn=0.001205,0.001714&t=k&z=19&om=1
In that long URL of gobbledygook is the morsel of information we're looking for: the latitude and longitude of the map center. Find the ll parameter, and copy the two numbers that come after it. In my case, my address is at: 34.019968,-118.289988. Remember this latitude and longitude for the next step. If you also like the zoom level that the map is at right now, copy the z parameter. It should be a number from 0 to 17. (Be warned: The Maps API and Google Maps use slightly different tile sets, so it's possible your Maps API map will not be able to zoom in as much as Google Maps.)
Section 4: Customizing the Map
Get ready to code! In this section, we'll be making changes and additions to the map HTML file to customize the map based on your preferences. Each time you make a change, you'll want to repeat Steps 5-8 from Section 2 to re-upload the file and see the changes in the browser. If you'd like, you can save your file with a different filename each time in case you want to go back to a previous version or if you are worried about breaking the code.
If you don't still have mymap.html opened in a text editor, open it now.
Add the code to center the map at the latitude/longitude you found in Section 3. The line that centers the map in the current code is:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
This line calls setCenter on the map object, and passes in a GLatLng for the center, and a number for the zoom level. Change the two parameters of GLatLng to the latitude/longitude you found, and if you'd like, change the zoom parameter. Zoom level 0 is the lowest zoom level (showing all of the world), and increasing numbers zoom in closer.
Upload the page and preview it now. You should see it centered at your address, like:
http://maps.examples.googlepages.com/mymap_centered.html
Add code to change the default map type. Currently the map is showing the Map map type, which shows street names, country borders, etc. The other two options are the Satellite and Hybrid map types. You can see the difference at http://maps.google.com by pressing each of the three buttons in the top right corner. The line of code to change the map type is:
map.setMapType(G_NORMAL_MAP);
map.setMapType(G_SATELLITE_MAP);
map.setMapType(G_HYBRID_MAP);
The default that it's already using is G_NORMAL_MAP, so if you want to change it, use either G_SATELLITE_MAP or G_HYBRID_MAP. Add this line of code after the map.setCenter code.
Upload the page and preview it now. You should see the changed map type, like:
http://maps.examples.googlepages.com/mymap_maptypechange.html
Add the code to create a marker at the center of the map, like the markers you see when you find businesses on Google Maps. The line of code to create a marker is:
var marker = new GMarker(new GLatLng(34.019968,-118.289988));
The line of code to add a marker to the map is:
map.addOverlay(marker);
You just need to change the values in GLatLng to match the latitude/longitude you found, just as you changed the map.setCenter parameter in Step 1.
Upload the page and preview it now. You should see the a marker at the center of the map, like:
http://maps.examples.googlepages.com/mymap_markeradded.html
Add the code to open an info window (bubble) over the marker and add some information about the location.
The code to open an info window over a marker is:
var html="<img src='simplemap_logo.jpg'" +
"width='128' height='41'/> <br/>" +
"USC GamePipe Lab<br/>" +
"3650 McClintock Ave, Los Angeles CA";
marker.openInfoWindowHtml(html);
As you can see from my example, you can pass any HTML into the info window. You do need to be careful about quotation marks in the HTML, however. Here, I've used double quotation marks around the HTML, and single quotation marks around attributes in the HTML tags.
If you include an IMG tag in the HTML, you should define the width and height attributes of the image so that the info window is sized correctly to fit the image inside.
You can take that line of code and change it to display whatever you want inside the info window. When you're done, upload the page and preview it. You should see the info window displayed above the marker when the page loads, like:
http://maps.examples.googlepages.com/mymap_infowindow.html
Add the code to add controls to the map. On the maps.google.com map, you'll notice multiple controls overlaid on the map that aid you in navigation and changing the map view. With the API, you can add any of these controls to your map, and you may want to do so to let people visiting your map view the area around your map. Here are the various controls options:
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
You should only add one of the zoom/pan controls: either GSmallMapControl, GLargeMapControl, or GSmallZoomControl, since they show up in the same location and accomplish similar things. You can add any or all of the other controls, as you so desire. These lines of code should be added anywhere under the map.setCenter line.
Upload the page and preview it now. You should see controls added to your map, like:
http://maps.examples.googlepages.com/mymap_controls.html
Change the HTML to resize the map. The default map has dimension of 500x300 pixels. You may want your map to be larger or smaller than that. The map size is dependent on the size of the div that the map is initialized within, so you'll need to change the dimensions of that div to your desired dimensions. Find the following line of code and replace the default width and height to whatever you want:
<div id="map" style="width: 500px; height: 300px"></div>
Upload the page and preview it now. You should see a resized map, like:
http://maps.examples.googlepages.com/mymap_resized.html
" |
|
