Blog 15_Project Semester 2

FYP Project                    K00121609                          March 2017

Blog 15: API & Google Maps

Part of my plan for this project 'Design Your Day Your Way-for Life Management' was to include a Google Locator Map in the project, enhancing the 'being in the present moment, for focus theme of the project.

I found that it was straightforward to input a map into the website. As this is a Creative Multimedia Course, I decided to make this map a interactive experience for the user. 

As I progressed in the research to make this happen, I found that it was essential to obtain an 'API Key' to add to the script element in my html website page. When I figured out how to obtain this key, I took screen-shots to record and describe the steps taken. 

This first diagram is of the role of an API key, where it mediates between a Google Service and the application. The Google Service I worked on was 'Google Maps.'

The following are the steps taken:

Step 1: Reading about the functioning and the requirements for the API:

Step 2: Setting up of API key instructions:

Step 3: Selection of 'Credentials' step:

Step 4: Creation of a 'New Project' which is required before obtaining an API key. I labelled my project 'SB Design Your Day' and my 'Project ID' provided is 'sb-design-your-day.' 

Step 5: This is an overview of my project page created called as above 'sb-design-your-day':

Step 6: There are a list of different application types in which 'Google Maps' and API's can be used. For this project I selected the 'Google Maps JavaScript API':

Step 7: I applied the credentials and in the 'Get Your Credentials' section you can see the 'API Key' that I have acquired.

Step 8: This screen-shot shows API date set-up details, my identifying email address, the API Key and radio-button options of which I selected  the 'HTTP reference':

Step 9: This is what my Google Project looks like in a screen-shot view:

Step 10: This is the project 'Settings' page which displays: my project name, project ID and Project Number which I then saved:

Step 11: This is a list of the credentials page where I set the name users would see as 'map.' There are also options here for displaying a project url when uploaded on a web-hosting site like git-hub: 

Step 12: input of the reference point API Key code to java script in the html website page. Here I referred to W3 Schools for the format of the API entry. Here I found that the 'https' address is inputted followed by the 'key=' , then the 'API Key' code, the '&callback=myMap':

Step 13: I have here set a default location to 'Limerick Institute of Technology, Limerick.' The co-ordinates for this are: latitude (52.6749), longitude (8.6476). This is where the red ping symbol is on the map.

Step 14: This is the result at a zoomed out version of this map, where the user can use the arrow keys at base left of screen to zoom in and out and the default I have set at Limerick Institute of Technology, Limerick as the red ping, holds its place at step 13, stated cor-ordinates as a reference point for enhanced user interaction.

Step 15: These icons are clear to find and see on the map. The + & - refer to zoom functions. The person icon has excellent user interface functioning. Here, on click of the icon, a pan hand symbol appears. This is used to drag this icon across the page to a location a user wants to view as an image, there is also a rotate function to this element. 

Step 16: I dragged the icon to Limerick Institute of Technology and on off-click of the mouse in dragging the icon an image as here appears. Also, before you click off the mouse as you drag the icon, there is a live preview image connected to the person icon, so you know what image to select.

Step 17: This image is of the right left corner of the screen in the above step 16. Here, there is an option for a full screen view using the dashed square icon and a rotation of view option of the arrows icon and then the zoom functions:

Step 19: This is an image of what appears in the top left corner of the image screen, the 'back arrow' which brings the user back to the map version:

Step 20: This is another screen-shot I took of the results screen, when I used the person icon to locate an image of LIT. This is to show that the images of locations that are possible to select can be from various angles and viewpoints and result in very high quality renders.