Putting Google Maps Onto Your Site with Javascript
Project: Putting Google Maps Onto Your Site with Javascript
In this simple project, you’ll interact with one of the most ubiquitous APIs out there: Google Maps. It has TONS of really cool functionality (you can basically make a map that does anything you want) but here we’ll just get some more experience with placing an API object on a page. You’ll get some practice with reading API documentation, because we won’t tell you how to do what you need to do here.
Your Task
Create a simple site that has just a Google map on it and a form where the user can enter a latitude and longitude and a message. When the form is submitted, a marker is placed on the map in that location. Clicking the marker should bring up the message that was entered (you don’t need to create this functionality yourself – if you set up the marker properly then Maps will do it for you).
Play around with the other options the Maps API gives you – you can customize almost everything on a map, from the way the thumbtacks drop down to the colors of each element.
- Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
- Set up a blank HTML document
- Read through the maps API documentation to see how this all works.
- Think about what you’ll need to do to get the form to create a new map thumbtack/marker and what methods the API gives you. A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.
- Build it!
- Push your solution to Github and submit it below.
A very quick one for a change. The only difficulty was understanding the google maps API, but there is a looooot of documentation out there.
I’ll admit that I copied the initialize and addMarker functions directly from the docs. Nothing special to see here.