A google map was created in Atom text editor using JavaScript API. It is unsure which other text editors are compatible with the code, so it would be helpful to simply download Atom text editor. A very useful video on how to get started and set the map up can be found here: https://www.youtube.com/watch?v=Zxf1mnP5zcw&ab_channel=TraversyMedia . Before anything, you will require a google map API key to use in your code. Without the key, your map will not display. In Google Cloud Platform https://console.cloud.google.com/google/maps-apis/api-list?project=testproject-340117, navigate to “APIs” at the leftmost sidebar, find “Maps JavaScript API” from the list, and enable it. Then return to the sidebar, and select “Credentials”. near the top, select, “CREATE CREDENTIALS”, AND CLICK “API key”. A new API key should be created, and you should see it below under “API Keys”. Copy or save this Key for later.
Now, open open the index.html file by right clicking → Open With → Atom. Next, we will install 2 packages; One that will make text easier to navigate/code and another package that allows you to display the server (the map) on your local host (in my case it is a new google chrome tab). To install, go to File → Settings → Install → Search up “emmet” (make sure packages is selected) → install emmet. For the other package, search up “atomlive-server” (make sure packages is selected) → install atom-live-server (by jas-chen).
Before running the current code, you will need to replace the API key with your own. With the API key from before, copy and paste that at the bottom of the code where it says “YOUR_KEY”:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
To run the current code, click “Packages” at the top → atom-live-server → Start server.
If done correctly, a new chrome tab should open that looks something like this:
It is important to note that the warning message will pop up everytime, and it is safe to ignore it. The entire is also covered in a watermark “For development purposes only” as projects in Google Cloud Platform require billing (which has not been added). Do not worry, as the map can still be navigated through with the watermark.
To check that some of the functions are working, you can click any empty spot on the map to add a marker labelled with a new letter of the alphabet. You can also try clicking on an existing marker to reveal information about the location. At the top center of the map, you will see a button called “Find Current Location”. When clicked, you will be prompted to allow location services and the map will center to your current location. To go back, click “Return to UW” at the top left.
In the current code, attributes can be set to determine the center the map upon starting the server, the zoom level, and map type (hybrid/terrain/road). The center of the map can be identified using lat/long coordinates and in this case, it is set to the the middle of the University Shops Plaza. The zoom level is 17 (the higher the number, more zoomed the map is), and the map type is hybrid, which shows terrain as well as street/location names.
A listener was added to “listen” to clicks on the map, and when clicked, a new marker is added with a sequential alphabet label. Another listener was added to listen to clicks on existing markers, which then shows the info window for that marker.
A list of markers were declared with lat/long coordinates and content containing the location name. The list was looped through and each marker was added to the map. The red polyline path was drawn using a list of flightPlanCoordinates, which is just another list of lat and long coordinates. Properties of the polyline were set, such as the colour, opacity, and weight, and the flight path was set to the map. This simply connects each sequential coordinate using a red line and displays the red line on the map.
Finally, functions were added to display buttons that allow the user to jump to their current location, as well as jumping back to the Waterloo campus.