From the course: Code Clinic: JavaScript

Mapping with the Google Static API - JavaScript Tutorial

From the course: Code Clinic: JavaScript

Start my 1-month free trial

Mapping with the Google Static API

“

- [Narrator] To create our map, we're going to use the maps static API from Google. It's pretty easy to use, all you need to do is to create a URL that defines the map. We're gonna need to type in at least the center of the map. As you can see here, you can literally just type in any address and it will find it. Then we also need to specify at the very least a zoom. That means how zoomed into that map you will be. Then we can also specify the size of the map. 600 by 300 is the maximum map that you can use. There's a lot of other parameters, you can read more about them in here, but let's go ahead and get that going in our application. I'm going to replace this right here and the first thing I need to do is to create an element that doesn't exist in my HTML, so I'll use the document create element. I'm going to create an image element. I'm going to use the let command here. I'm gonna also change the class name of that image because I want this to be a responsive image, and in Bootstrap adding the img-fluid class is gonna try to make this responsive. Then I wanna change the source of the image. For that, I need to type in the URL. https://maps.googleapis.com/maps/api, it's a long URL, staticmap and then I need to at least specify a center. Let's go ahead and make this bigger. My center for that I'll use the latitude and the longitude but I need to put a comma in between them. We'll put a comma. Longitude. Let's go ahead and save that. It's gonna reformat it a little bit better. Then after the longitude, I need to do at least a couple of parameters. Ampersand is how you separate the different parameters. I need to make sure that I include the zoom. 12 is a good zoom, so if you don't put a zoom, then what'll happen is you'll get a map of the entire planet, which is never good for helping people find things. I need to also include another ampersand here. Size, and the maximum size that we can use is 600 by 300. Save that and one more thing. I need to go ahead and append this new image into my dom, so we already have this myMap element that we're targeting. What I'll do here is say myMap appendChild and then append that image into the map. Let's go ahead and save this. Check out our page. Might take a second. It looks like it didn't like something. Either we're really zoomed into the ocean, or we're not getting a good latitude and longitude here. Let's refresh this just in case. It looks like I actually just forgot to put the equals sign here in the center, so who knows what it's doing. It's probably centering that map into some sort of ocean location. Once we do that, you can see the map of where I am right now, and that really sort of solves most of our problem, but in the next video I'll show you how to add a few goodies and then we'll work on adding a URL so that this map here will link into Google Maps.

Contents