Development
Compiling Data
I started off by gathering my information in a document and converting it to a JSON file. My hometown's mascot is the bear, and we have dozens of themed bear statues around town painted to match the business or theme they represent. I compiled the data, including the bear's name, artist, location, address, and image into a JSON file so I could recall the information easily.
Writing JavaScript
After I compiled the data, I used JavaScript to fetch and parse the information. This portion was completed in 3 steps: creating map markers, opening info windows, and displaying information on the page.
Map Markers
For each location in the JSON data, I used JavaScript to create and place markers on the map. This involved iterating through the data and using the coordinates to set marker positions.
Info Windows
An info window was created for each marker. JavaScript event listeners were added to handle user clicks on the markers. When a marker was clicked, the corresponding info window would open, displaying the relevant information. Additionally, the JavaScript event listeners ensured that user interactions were smoothly handled. For example, clicking a different marker would close the previously opened info window and open the new one, providing a seamless experience.
Displaying Information
In addition to info windows, JavaScript was also used to write the information each location (or bear) further down on the webpage. This provides users with an enhanced view and a more accessible viewing option.
End Product
🏆 Achievements Unlocked!
- Experience with Google Maps API: map embedding, customization, adding interactive elements
- Increased proficiency in JavaScript: manipulating DOM elements, handling events