Setup

The following modules will take you through building a simple program to access and display information from GoogleMaps. This tutorial was created by Mozilla and can be found here.

File Structure

We will be working with the following files:

    javascript-library
        └── 0-JavaScript-PreWork
        └── 1-JavaScript-Fundamentals
        └── 2-JavaScript-DOM-Manipulation
        └── 3-JavaScript-API-Fundamentals
            └── 1-Intro-to-API
            └── 2-Asynchronous-Programming
            └── 3-Fetch
            └── 4-Apps
                └── 01-New-York-Times
                └── 02-Pokemon
                └── 03-YouTube
                └── 04-GoogleMaps
                        index.html <-------- You will be working with these files
                        googlemaps.css <----
                        googlemaps.js <-----

Prep Work

Before you start this section, bookmark the following repository. We are staying aligned with the MDN docs. Navigate to the google-maps folder (/javascript/apis/third-party-apps/google-maps). There are two files here: index.html, which is the completed code, and maps_start.html. Feel free to consult the finished code if you get stuck, but try to do it yourself first rather than just copying the completed program. We will be building maps_start ourselves.

What We Are Going to Build

We're going to build a little application that uses the GoogleMaps JavaScript API. We will use this to display our current location on a map and also play with some other icons on the map.