Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:1.7 hours

Next lesson playing in 5 seconds


Custom Interactive Maps With the Google Maps API


  • Overview
  • Transcript

Get started creating interactive maps using the Google Maps API. In this course you'll learn how to create and configure different types of maps, how to attach events to these maps, and how to create and customize markers. You'll tap into some of the more powerful services that Google provides, such as geocoding, and then abstract all of this out into your own custom library. By the end of this course, you'll be able to take the library you create and apply it to your own applications.

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

Everyone knows how to use Google Maps and you may have even embedded one in a website before. However, in this course, we're gonna get down into the weeds using the Google Maps JavaScript API. If you've ever wanted to create an interactive map before, then this is the course for you. We'll start off by learning how to create and configure different kinds of maps, and then we'll learn how to go and attach events to these maps, as well as creating customized markers. We'll also learn how to keep track of these markers, and find and filter them in advanced ways. We'll also tap into some of the powerful services that Google Maps provides, such as geocoding. And since a lot of these processes require some of the same code, we'll be abstracting all of this out into our own custom library. So by the end of this course, you'll be able to take the library that we created and apply it to your own application. So I hope to see you in the next lesson. [BLANK_AUDIO]

1.2 Setting Up a Key

Before we can get going on our Google Maps, we need to set up an API key. So in this lesson, we're gonna familiarize ourselves with the Google Maps documentation, as well as set up an API key. The main site for the Google Maps documentation is developers.google.com/maps. And here is where you need to select what platform you're going to be using. And in this course, we're gonna be using the web platform and particularly the JavaScript API. In the main page for the Javascript API, we can click on this Get Started link. And this is where the bulk of the documentation lives. In the left nav bar, you can see all this information. The top contains all the high level overview of each topic. And then below, where the API references link is, this is where the actual API specifications live. So if you ever want to see what a function takes or returns, this is where you would go. However, going back, we need to scroll down and take a look at obtaining an API key. To use Google Maps, you need an API key. If you're in development, you can get away without using one, but you'll have to put it in before you go to production. The reason why you need an API key is for you and Google to keep track of how much you use this API. If you generate 25,000 map loads or more everyday for 90 consecutive days, then you'll probably get contacted by Google to become a paying customer. So, rather than clicking this link in the instructions, we can go to a new website for the developer console. So, if you go to console.developers.google.com and then sign in with an account, we'll be able to set up an API key. The first thing we'll do is we'll create a project. I'm gonna call this project Mapster, and this is the ID that's being assigned to me. You can change it something that you want, but I'll just keep the generated name. Now that our project's been created, we can go and enable an API. This is a list of APIs that Google will allow access to. If we scroll down, we can get to the Maps API. So right here is the Google Maps JavaScript v3 API. You can see that you're capped at 25,000 requests a day. And currently, it's off, so we'll click the Off button. And now at the top, we can see that we have our Google Maps JavaScript API enabled. To the right, we can see the quota usage, and we can see that it's at 0% currently. So when we're creating maps, if we use our API key, we'll see this quota grow. To get our API key, we'll just click on the link, click Credentials in the left nav bar. Click Create new Key, and then click Browser Key. And then click Create. Now we've generated out an API key. So in creating Google Maps, you'll use this key and this will keep track of your calls to the API. However, in this course, we're not gonna be using a key since everything we're doing is in development. So, now that we know how to create our API key, we'll go and create our first Google Map.