Using Google API for javascript maps
I used google API to add google maps to my portfolio project. This wasn’t terribly hard to do because of how much documentation Google has on how to use their API.
The first thing I had to do was create an API key for the type of map I was wanting to use. I chose the javascript key. After this, I needed to add it to my HTML using a script tag in the body.
Here is the link to use Google API as a developer:
*The trickiest part of using Google API was having to use the functions they have already created.*
*The first part of this wasn’t too tricky*
To add the map to the page in javascript, I needed to add the function initMap(). By using this, I was able to edit the features that I wanted for the map. I could change the size, where it was centered (I chose Lebanon, KS because it is the center of the continental US), I also took some functions away like the zoom bar. I wanted to do this so that the map would look more like a picture instead of a google map.
The hardest part for me was adding objects. Initially, I was trying to create my own functions to add the markers or my objects to the map. This wasn’t working because they use their own functions. I spent some time looking at their documentation and found the correct function (setMarkers()). This allowed me to add the image in reference with the object I created for the lat and lng of all the desired locations. After this, I was feeling better about how I was using the API.
I encountered another problem due to the created functions. I wanted to add a listener event from a click to the map. This wasn’t working and I couldn’t figure out why. My biggest concern was that this was the most important part of my project and the title of the website. “National Park Picker” If I couldn’t pick the park then what was the point.
I did more research and found out that the addEventListener was a different function in the Google API. I needed to use addListener instead. After figuring this part out, I was able to change the images associated with the “markers” I added to specific locations with a click.
Finally, I was able to show what I wanted.
Google API was tough to use because of the premade functions that were sent when I added the API into my HTML document. This is a valuable lesson for a developer “use your resources”. Google has plenty of information on how to use their API and it is clearly available for your benefit. When using something new, don’t be afraid to do more research on how to use it. Their maps are a great addition to any website and it is so common to see them every day.
I see Google maps when I use their app as well as when I visit websites. Many websites integrate this by showing where their business is located. Learning how to use Google Maps is a great tool as a developer and in many instances, you could see it when you are programming.