Course List >> Javascript and jQuery >> Linking to APIs and Your Rails Back End >> Project: Putting Google Maps Onto Your Site
Scroll up or hover over the breadcrumbs to view the navigation bar

Putting Google Maps Onto Your Site

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.

  1. Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
  2. Set up a blank HTML document
  3. Read through the maps API documentation to see how this all works.
  4. 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.
  5. Build it!
  6. Push your solution to Github and submit it below.

Student Solutions

Submit a link below to the github repo with your files in it by using a pull request. See the section on Contributing for how. Please include your partner's github handle somewhere in the description if you had one and they would like attribution.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150