Furman University



GIS Web Lab: Google Maps

April 4, 2013

Adapted from publicly available lab at:

Purpose: We’ve made maps using the Google MyMap functionality, but what if we want a map that lives on our server: ? Luckily, we can call and utilize the Google API from our server. In this lab we’ll do just that, and learn how to customize and add our data to the map.

I can’t emphasize enough how much the web hates filenames with spaces in them. Please don’t use spaces in any file or image name!

The program we are using does not have a robust undo feature (it’s free). You may want to periodically copy your file to a backup folder, so you don’t have to start over.

Exercise 1: Customizing a Basic Map

Step 1: Copy the sample map

1. Map the N drive to the GIS share. I bet you can do this in your sleep now!

2. A very basic Google map is available in our weblab class data folder.

3. Copy map.html to a weblab folder in your www folder (N:\\users\yourname\www\weblab). NOTE: you are creating a weblab (no spaces) in your www folder (not where we usually put labs).

Step 2: Check out the code

1. Launch the PageBreeze application from the start menu. This is a free HTML editor.

2. In PageBreeze, open the map.html file stored in your folder on the N drive.

[pic]

3. Once you navigate to your weblab folder, you should see the map.html file in the lower left pane of the PageBreeze HTML Editor. Double-click it to open it and click on the ‘HTML source’ tab.

4. Notice that this file contains HTML, JavaScript, and text comments. Commenting is used to make the browser ignore that line, whether it is actual code or simply text (on the line above the code) that explains the purpose of the code.

○ HTML code is commented out with a at the end of the comment. This can be used for multiple lines of code at once.

○ Javascript code is commented out with a // at the start of each line, and does not need a closing tag. New // are needed for every line to be commented out.

5. Read through the code carefully (click the ‘HTML Source’ tab). Get a sense for what the different lines of code do.

6. In case we mess things up, let’s save the file as yourlastname.html in the weblab folder (you will need to go back to the ‘Normal’ tab> file > save as > yourlastname.html > OK.. NO SPACES!!

Step 3: View your map in a browser, and modify

1. Open Firefox, and browse to the following URL, modified with your name:

2.

3. Your map is on the web and not on Google’s servers. Yippee! If you aren’t celebrating this success, find Mike.

4. We’re still dependent on Google. Check out the following line in your file. This hooks us into Version 2 of Google’s API. I registered the gis.furman.edu domain with Google and they provided us with the key in bold. If you put your page on a different server, you have to sign up for a key specific to that domain. It’s easy and free. Since we’re all on the same server, we’ll use the same key.

5. Now you can make changes to the yourlastname.html file in PageBreeze, save the file, reload Firefox, and view the changes. After each step below, make sure you reload Firefox to view how it changes the map (by clicking the blue circle arrow button or View menue > Reload).

6. The lab will refer to approximate line numbers in the HTML code. You can search and go to specific lines by right-clicking in the code window and selecting ‘Go To Line...’.

[pic]

7. Click on the HTML tab and uncomment the line below (~line 36) by removing the // at the start of the line.

//gmap.addControl(new GSmallMapControl());

8. Comment out the line below (~33) by adding a // at the start of the line. This will change the map zoom/pan control from large to small.

gmap.addControl(new GLargeMapControl3D());

9. Refresh your map in the browser. You should now have a small, rather than large zoom controller.

10. If it worked, we’re coding JavaScript now baby!

11. Comment out the line below (~42). This removes the Satellite, Map, Hybrid options on the upper right. Remember to refresh the browser.

gmap.addControl(new GMapTypeControl());

12. Uncomment it, as these are useful on most maps.

13. Uncomment the line below (~45). This adds the Terrain map option on the upper right of the map.

gmap.addMapType(G_PHYSICAL_MAP);

14. Uncomment the line below (~48). Change the initial map type from "G_PHYSICAL_MAP" to "G_SATELLITE_MAP" or "G_HYBRID_MAP".

//gmap.setMapType(G_PHYSICAL_MAP);

15. At ~ line 51, the values: (39.10960, -96.5), 4) are the latitude, longitude, and zoom values used when the map is loaded. Change these values to see what effect it has when the map loads. Experiment with different values to see where on earth the map loads to.

16. Use the Geographic Position Finder to find a latitude, longitude value you want the map to open at.

17. Change the height and width of the Google Map in line the line below (~71) by altering the "700" and "500" values.

18. I like setting the width to ‘100%’, so it fills up the window no matter what the user’s screen resolution. 100% doesn’t work for height. You still have to specify that in pixels.

Step 4: Add a marker with information to your map

1. In your yourlastname.html file, copy and paste the following lines of code after gmap.setCenter function (~51).

//Adds a marker with window information

function createMarker(point,html) {

var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

});

return marker;

}

var point = new GLatLng(35.65654,-106);

var marker = createMarker(point,'Dr. Perry and Brendan research in this state! More about the Furman Puma Project.');

gmap.addOverlay(marker);

//End of add marker code

2. Refresh Firefox, and the marker should appear. If your map is not zoomed in on the U.S., zoom or pan there to see the marker. Click on marker to view the information.

3. Change the latitude, longitude value for the marker in the HTML code. Notice the resulting change in marker position when the map is reloaded.

4. Change the text and the link to something else. Be creative. You have to be really careful not to delete quotes and tags.

5. In the code, the word "More" is hyperlinked by surrounding it with the "a" tag. The tag opens with and closes with . Moving the closing will change the words that form the hyperlink, i.e. the text that is a link to the webpage you specify.

6. In the marker's information window, hyperlink goes to . Change the URL by changing the "" to a different website's URL. Change the text "More about...." to something that makes sense with the new website.

7. Add another marker by copying and pasting the last three lines of the marker code directly beneath the existing marker lines. These lines here:

var point = new GLatLng(35.65654,-106);

var marker = createMarker(point,'Dr. Perry and Richard research in this state! More about the Furman Puma Project');

gmap.addOverlay(marker);

8. Change the latitude, longitude value for the 2nd marker. Repeat to add more markers (at least 3 total).

9. Check out the code. For each marker, you’re calling the createMarker function and passing it 1) the point you made and 2) the html text for the pop-up bubble. Functions help you tighten up your code. If you make a change in the function, it will affect every point that calls it.

Step 5: Change the icon style of your markers.

1. Google has made many icons available as URLs. For example, the icon of a gas pump is this URL: . A full list of the icons is available here. You can change the image by changing the URL in bold.

1. To change the default icon to a custom icon replace the following code (the function we mentioned):

function createMarker(point,html) {

var marker = new GMarker(point);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

});

return marker;

}

with the following:

//javascript that sets up variables that enable the map to draw a custom icon.

function createMarker(point, html) {

var myIcon = new GIcon();

myIcon.image = "";

myIcon.iconSize = new GSize(20, 34);

myIcon.iconAnchor = new GPoint(10, 34);

WindowAnchor = new GPoint(10, 0);

var markerOpts = { icon: myIcon };

var marker = new GMarker(point, markerOpts);

GEvent.addListener(marker, "click", function() {

marker.openInfoWindowHtml(html);

});

return marker;

}

2. Reload Firefox to see the new icon.

3. Choose your favorite icon from the icon list website, and change your placemarks by replacing the URL in bold, with the URL of the new icon.

Step 6: Add a polyline to the map.

1. Copy the code for the polyline and paste it in into your file directly after your marker code (shown below).

//End of add marker code

2. This code will draw a thick pink line from California to Maine to Texas.

//Begin polyline code

var polyline = new GPolyline([

new GLatLng(37.4419, -122.1419),

new GLatLng(45.65654,-71),

new GLatLng(28.65654,-100)

], "#ff0044", 10);

gmap.addOverlay(polyline);

//End polyline code

3. Preview it in Firefox (hit refresh).

4. Change the latitude, longitude values of your polyline to draw the line where you want.

5. Change the color of the line to gray by changing the "#ff0044" to "#110022". This is a hexadecimal color reference. You can find more codes here.

6. Change the width of the line by changing the number 10 (appears after the "#ff0044").

Step 7: Change the website look and feel around the map using html

1. Change the "Basic Google Map" text above the map. Near the bottom of the file change the text below from:

Basic Google Map

to:

YOUR NAME'S Google Map

2. Change the Web Lab Google Map text: that appears in the browser file tab by altering the following line (near the top of the code) from: [pic]

Web Lab Google Map

to:

MY NAME's Custom Google Map

Change the background color of your web page by changing the line from:

to:

3. You can replace gold with a hexadecimal color as well.

Step 8: Add your kml overlay to the map.

1. Copy the code below and paste it in into your yourlastname.html file directly after your polyline code. Change the URL to point to the KML file you created in class. Make sure the kml file is located in the www folder on the GIS share. Think about how awesome this is. You can add your entire tour (that you created in Google Earth) to Google Maps as a layer. If you change the kml file, the map changes accordingly!

//Adds a kml overlay

var geoXml = new GGeoXml("");

gmap.addOverlay(geoXml);

//End of kml overlay code

Lab Write-Up:

Send the URL to your map to Mike.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download