Gulf Shores, Alabama


The map above is a customized Google Map of Gulf Shores, Alabama.  It was created using Google Map’s free application programming interface (API).  It was created as an introduction into creating a GIS mashups using JavaScript and XHTML.  In order to create it we were introduced to W3C School’s tutorials on JavaScript and the HTML Document Object Model (DOM).  Both tutorials were good introductions to the material, but were a bit too extensive to grasp all at once.  The tutorials have very good examples, but without having to implement all of the concepts into practice personally, much of it is still fuzzy in my mind.  Having done programming before, I believe it will become clearer as I refer back to the sites as we progress further into the course. 

This map was modified from Google’s basic Hello World! code by creating a new variable with the longitude and latitude of Gulf Shores using the GLatLng() command and creating a map variable using the GMap2() class. That variable was inserted into a JavaScript map.SetCenter() command which creates a map whose center is at that variable’s location. The map.AddOvelay() command then overlays a simple Google marker centered at the same location using the same variable inserted into the GMarker() class.  The getElementById() method within the GMap2() class uses HTML’s Document Object Model to assign the map created to a location within the body of the web page.  The only difficulties I encountered in making the modifications were debugging typographic and capitalization errors.