Zipped File of Code:

Describe briefly what you have done as work for that unit.

Throughout this unit, I worked towards adding external site data to my website by utilizing web based APIs. This was meant to add the functionality of other websites to my site with minimal effort. In general, I learned that all APIs are interfaces with sets of functions that allow programmers to access features of different applications with relative ease. Web APIs are no different except that the information is fetched over the web using HTTP protocol. In this chapter, I began by researching various dynamic web service functionalities. I first learned about the main two types of external site data, browser built and third party APIs. For the purpose of implementing my proposed idea, I needed to utilize Google’s JavaScript Map API which of course is a third party API. It is also important to note that I researched exclusively client-sided APIs for this chapter. 

The idea that I implemented is an embedded, customized Google map window. This window contains an interactive map with a number of tags within it. These markers represent locations of significant old growth forests specified on the map. The identified locations also have drop-down information sections which only appear once the user clicks on them. The tags were input as coordinate pairs to my JavaScript program that harnesses several of Google’s Map API functions. The JS program that I implemented makes use of several prebuilt Google methods. I made a function, initMap(), which initializes and adds the map using an API method called Map() within the classes google.maps. Within this function I declare and initialize an information variable that controls the default zoom and start location of the map once loaded. Within this function, I created an array called ‘marker_array’ which holds various coordinate locations their respective information strings. The Google Maps API is expecting certain data types, thus, the array element values are obtained using object names,  coordinates: & content:. There is then a loop which iterates through each of the marker elements, calling a function called addMarker() for each data point. This method takes data objects called ‘props’ which contain the markers coordinates and content string. With this information, it completes two main tasks, it first initializes the element’s marker position to marker objects. The program then checks if the current element iteration has content associated with it. If so, an event listener (addListener()) is used on the ‘marker’ objects previously declared. This listener then runs an anonymous function once a marker is clicked that opens the content window for display. 

Although I did not implement both ideas that I initially planned to, I feel as though the work I completed well demonstrates my abilities to utilize external web services. Further, I believe that my implementation exemplifies what is possible in the world of Web APIs. I wanted my work for this unit to remain tasteful with regards to my targeted personas. I could have implemented things like widgets for real-time communication or embedded segments of web pages to mine. Overall I do not feel that though reflect the true purpose of my website, this is why I chose to only implement the one idea. I will explain in depth why I did not implement any Instagram web functionionality to my website in the paragraphs below. 

Describe the rationale for what you have done, relating your work explicitly to the personas and scenarios you developed in Unit 1.

The embedded Google Maps window that I chose to implement for this chapter was directly done out of thought for the personas that I identified previously. One persona which I targeted specifically was that of Timothy Granger. She is the arborist which is always looking for new old growth forests to explore. Covering this map with interactive markers allows users like Timothy to learn of new forests in the area. This also benefits the user, Ashley Scarpelli, whom is looking for the perfect location to take her wedding photos. Overall, this interactive map serves as a tool for individuals to find local forests that carry the natural characteristics that they previously learned about while reading my site. I also built this utility to be reactive to display size. This makes the tool accessible to users reaching my site via tablets and smartphones. Ashley is one identified persona who accesses my site through her iPhone 7. Ultimately, I wanted to integrate a tool to my web page that encourages visitors to seek outdoor interaction in iconic local forests. 

For each learning outcome for the unit, explain how you have met it, with reference to the content that you produce (typically your code or other design artifacts).

The only learning outcome for this unit was to utilize JavaScript in order to harness web services for dynamic content, I feel as though my interactive map achieves this in many ways. Firstly, I created a JavaScript function, initMap(), which initializes the map as discussed in the paragraph above. This function creates variables which store object types that are recognized and processed by the API, for example, zoom: & center:. There is also a variable ‘google_map’ that is created in order to hold the map object created by the API. I also wrote JavaScript code which creates an array to hold recognizable objects as elements. Some of which were coordinates: & content:, the coordinates{} object held two other objects called lat: & lng: which are both identifiable by the Google API. I also utilized loops in my JS code to call another method that creates markers once the map is loaded. This method contains more variable declarations that can add objects to the map. This was completed using an if() statement which checks for content then loads it to the markers object information. This is then displayed using an event listener for a user click which calls an anonymous function that does so. This API is designed to be accessed via JavaScript, this was done in my code on line 239. I had to create a Google account, create a project, and enable the web API. When doing so, I received an access key specific to my project that had to be embedded in my script tag as a “src.” Overall, I believe that I have achieved the learning outcome as I have utilized significant JavaScript to harness the functionality of the Google Map JS API. 

Explain and analyze what went well and what didn’t.

While completing the work for this unit, many tasks went considerably well, whereas some could have definitely gone smoother. An example of something that went smoother than I had anticipated was the implementation of the expandable content sections. Before conducting research on how to efficiently implement this feature, I had thought that I had to number the markers and correspond it with an info accordion located below. However, I was pleased to find out that the Google Map API supports interactable content sections. These literally allows programmers to code HTML within a content: object of the JavaScript program. Then using an onclick event, I was able to display and hide these divs. This implementation choice turned out to be much simpler than what was initially planned. Something else that went considerably well was the choice store various markers using an array rather than individual variables. This allows us to loop through and call the marker initialization function for each very easily. Whereas if they are individually input, they need to be individually called with their own function call. Ultimately, it makes it easier to expand the number of markers in the future because they are not ‘hard coded’ into the program. 

Something that did not go as planned was my attempt at utilizing an Instagram API to embed my current feed to a page of my website. While conducting research for this idea, I came across Instagram’s Development page for Embedding and it appears as though they only allow programmers to embed single images and photos. When I came up with this idea, I wanted it to be an automatically updating display of my Instagram feed. Unfortunately, I have now come to learn that the official Instagram API does not support feed embedding. There are several other third party APIs that claim to offer this ability, however, after considerable testing they are filled with spam and bugs. Some of which are able to embed photos, but clicking on them brings users to third party spam sites. Thus, since I would have to hard code individual photos to embed them, and constantly keep it updated, I figured it was more work than it was worth. I don’t think implementing this type of feature would improve the user experience for my identified personas. I think it would have been troublesome for some to use, also evoking distrust with the website since it contains spam and functions with error.  

Describe what you would do differently if you had to do it again.

If I had to complete this unit again I would definitely learn from the mistakes I made while attempting to generate an API key from Google. After watching several tutorials, I had figured that this should be an easy task. However, the API key request tool on Google was giving me considerable trouble. I spent nearly two days trying to figure out what was wrong. I then realized that the issue was caused when Google tried to process the request for my university email account. For some reason, it will not let you do this and it is necessary to create a new Google account. If I had known this simple tip, it could have saved me plenty of time.

Website Link: