Google Maps setup

Our first set will be setting up Google maps, so when you click it returns latitude and longitude. We’ll later use that information to connect to the Youtube API and search for videos! Awesome!

This first bit doesn’t have much to explain we’re creating an HTML document, and including jQuery and Google Maps.

Next up, just a bit of CSS to format things properly. Not pretty, just enough to get the idea across:

Here’s where things start to get interesting with Google maps:

Next, we’ll just finish off the page with a placeholder for the map, and a placeholder for the coordinates to appear.

Here’s what it looks like:







In this first lesson, you’ve got google maps returning latitude and longitude from clicking on Google maps. This is a great thing to know how to do, and is useful for many different web applications.

The interactive demo for this step is available here:

In the next lesson, we’ll learn how to use the YouTube API to return videos based on longitude and latitude coordinates.