Getting Started with The Google Maps Javascript Api Part 4

MANO MARKS: Hi, I'm Mano Marks, developer advocate from the Google Maps API team. This is the fourth video in a series of four designed to show you how to get started with the Google Maps JavaScript API. In the last video, I covered adding an API key to your Maps API loader and the various parameters that the loader takes. In this video, I'll cover the basics of map options and getting your maps to render on a page. If you've been following along with this video series, you have a text document with this code in it. As we walk through this basic HTML page, you'll see the basic declaration of elements. The first thing I want to point out is the style element. One of the most common mistakes that developers make is to not specify the size of the div that contains the map. If you don't declare a size for the div, then when the map is created, it will be created, but it will be invisible because the div is size 0. This isn't part of the Maps API. It's a basic part of how HTML and CSS work. In this sample, we've put the style in line with the page. In most cases, however, you would like to link to a separate file containing your style sheets for ease of maintenance and reusability. The next thing you see is the script tag that loads the Maps API. I covered that in the last video. Next we'll see the JavaScript that adds the map the page. You'll see we declared the map variable as a global variable. That's in case you need it for other functions. Next there's an initialize function. This is where we actually create the map and assign it to a particular div. In the initialize function, the first thing we do is create a map options object. There are two required properties for a map options object. They are zoom and center. Zoom we covered in the first video in the series. As a reminder, zoom 0 is zoomed way out, showing the map of the whole Earth. Higher zoom levels get you closer to the map and show more detail. We also talked briefly about center in the first video, but, as a reminder, the center of the map has a lat/long object. A Google Maps lat/long object has two properties, latitude and longitude, naturally. You'll see lat/long objects again, particularly in various kinds of overlays, like markers. There's a whole host of parameters that you can use in a map options object. For more information, check out the reference at this URL. Going back to the initialization function, we create the map object and assign it to the map canvas element. There's nothing magical about the name Map Canvas. It's just one that we've chosen, and so it shows up in all of our samples. You can see in the body element, there's a div with the ID map-canvas, which is where the map object will render. Lastly, we add a Google Maps DOM listener. This is a DOM listener that waits for the page to load and triggers an initialize function. That will prevent the map from rendering before the page is ready. OK, that's it. You have the basics you need for creating a map. If you are having any trouble getting your map up and running, you might consult this video on troubleshooting and common issues, and our support page has links off to the right tags on Stack Overflow.