GEOG863 – Project 4: Adding Basic Functionality to a Google Map

Project 4 Deliverable

Jen & Barry site selection at State College

Jen & Barry site selection at State College

Lesson 4 Narrative

The exercises in this lesson have helped me to crystalize some of the coding concepts that were fouling me up. Whereas in last week’s lesson I was fumbling around with using functions, I now see how simple they are to invoke and use in JavaScript.

This week, I appreciate the simplicity of ‘object literals’. Their use is so much more streamlined than in other code I’ve been exposed to, where invoking an object is often a multi-line process.

I did spend a lot of time on the first two pages following the Checklist: Modifying the Maps User Interface and Styling the Basemap. I kind of went into the weeds trying to grasp the model for the MapOptions and MapTypeControlOptions. This where the examples and illustration in Styling the Basemap were very helpful in visualizing the code syntax and structure for the objects and their properties. It was a stretch to contextualize the mapTypeIds { ‘styled’ } parameter, and how that satisfies the property for the map’s mapType; as well the concomitant need to ‘set’ the mapType using the setMapTypeId method.

The Styled Maps Wizard is a nice tool to have, especially with the ability to output code for insertion into my JavaScript.

The rest of the lesson was a lot more digestible when it came to creating markers and infowindows. These concepts still had their challenges, however, especially when it came time to complete the lesson’s assignment. It was actually a form of stress relief to map the cone.png image area in order to define the MarkerShape. And, it was also a good challenge to also apply the cone_shadow.png as a marker to the map. Something that appears odd to me is that neither the cones nor their shadows would appear on the map unless I reversed the creation order for the first latlng position, thus:

// 1st Marker Nittanytown
createShadowMarker(latlng, map, “cone_shadow.png”);
createMarker(latlng, ‘</code><b>Nittanytown</b>’ +
<div id=”content”>’pop. 85,000′, map, “cone.png”);</div>

For the 3 additional points the cone marker was created first, and the markers displayed fine. I hope the solution is apt.

pixel plot of cone.png

pixel plot of cone.png

I was anxious about this week’s work since I would be away from home for almost the whole week, and not sure of having continual internet access. I’m glad I got an early jump on this lesson, and I’ve been able to complete the assignment early.

Leave a Reply