Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Create a Map With the JavaScript API

Embedding a map with a URL is handy, but if you really want to have full control over your map, you need to use the JavaScript API. In this lesson I’ll show you how to get started using the Google JavaScript API to create maps.

Related Links

2.1 Create a Map With the JavaScript API

Hello everyone, I'm Reginald Dawson. Welcome to the Use the Google Map API course with Tuts+. In the last video we got started with the google map API by learning how to click embed version of our maps. These are good forwarded quickly display of map both if you want to have more control of the display with our map. Fortunately, the Google Map API comes with a JavaScript API that we can use. We already have our API key. But go into the Google developer's console, and make sure the JavaScript API is enabled. Once you do that, create a folder to hold your project. Inside that folder, create a file called index.html. First we will start off with the standard DOCTYPE and HTML tags. Then, we'll add our HEAD tag with our title, scale of our Viewport, and character encoding. Next, we will add a few inline styles. Here, we set the HTML page and the body height to 100% with no margins or padding. If we don't add this rule the display will collapse on the map and nothing will show. Then, we have our ID for our map this is where we will place the map on our page. As you can see, we have the map. Set to be 80% of the height of the page. Then, we add the body tags. This is where we will add the content of our page. First, we will add the div for our map. As you can see, this is where we have added our map ID. Then, after that, we'll add a button. This button will serve to change the map to a satellite view. Then, we can add three more buttons, these buttons all correspond to the views that are available to us from a JavaScript API. Then, we can add the script reference for the JavaScript file that we are going to add. dap.JS file is where we'll put all the code for this map. Then, the last thing we need to do is load the Google Maps API. Here, we are calling the Google Maps script and adding our API key. After the key, we have a call back function called initMap. This function will be called when the callback is run after the Google Maps script loads. After that, the index.html file is done. Next, let's create a file called app.js. First, we will add a variable. Once we have that, we can add our init map function. Of course, we know that this is the name of the callback function that we called in our index.html file. First, we will add a variable for our latitude and longitude. We need this, because of the only required map option I could find for the Java script map API center. Next, we will add our map options. Here, we have our zoom set to 18, remember 21 chose the greatest detail. While zero zoomed out fully. Then, we have our center option set to our latitude, and longitude, then we set our map variable to our call to the new Google Map method. Here, we supply the map div in our index.html by using get element by ID. Then, we pass in our map options. After that, we will capture all four of our buttons in variables. We will use these variables to change our map to the various maps that we can display. First, we add a clickHandler for the satellite button to set the map to the Satellite Type. We use the Set MapTypeId method to do this. A satellite map displays the map using satellite imagery. Then, we add the clickHandler to change the map to the Road Map Type, this is the default map that will be displayed when we generate our map. We could have changed the default by supplying the map type id and the map options that we pass through our new Google map method. The road map type displays a standard Google Maps road map. Then, we have the click handler for our hybrid button, which is a combination of a normal and a satellite view map. And then, finally, we have the quick handler for the terrain view button that displays the map based on terrain data. After that our example is done. Go ahead and save the project and preview it. When the project runs we should see a road map representation of the Statue of Liberty. If we click on the hybrid button, the view should change to a straight up over head photo. If we click on the terrain map and zoom out, we can see the different elevations in the surrounding areas. Then, click on the satellite view. Zoom back in and you will notice that the view will change. This is because certain areas have what's called 45 degree imagery available. We can also flip this view around with this control right here. As you can see, it's very simple to create a map with the JavaScript API. In the next video, we'll learn how to style this map.

Back to the top