2.5 Drawing on the Map

Hello everyone, I am Reggie Dawson. Welcome to the Use the Google Map API Course for Tuts+. In this video we will learn to place markers on our map. After that we will learn how to draw on the map. Remember when we created the embed maps in the first video? When we did the first map it added a marker at the location we centered our map on. We can also add these markers to own maps. Go back to the map that we added the styles to. First I'm going to fold up the map options to get them out of our way. Now to add a marker, all we need is a position. We also need a map which we can specify when we are creating our marker. Otherwise we can add the marker with the setMap method. If we don't do either of these, our marker will be created, but it will not be added to our map. This is all we need to add to place a marker on our map. First we have our call to new google.maps.Marker. After that we supply the latitude and longitude our map is centered on. And then we have the map that we want to add the marker to. Again, if I didn't do this here, I would need to use the setMap method. Then we give the marker the title of LADY LIBERTY!. Now go ahead and save the project and preview. As expected the marker is on the Statue of Liberty. If we hover our mouse over the marker, the title will appear. We also have a few animations that we can add to our markers. Let's we wanted to draw attention to our marker. We can set the bounce animations on our marker to make it standout. After we save and preview, our marker should be bouncing. Now this will continue until we explicitly set the animation property to null. So if this were a real application, I would make this bouncing stop after a while. We can also make a marker draggable, alter the label, or change its icon. For a full idea of what you can do with markers, check out the documentation. We can also create an info window to pass on information when the marker is clicked. First let's remove the animation property. Then we'll add a variable that contains a div that says, this is LADY LIBERTY. This is what will be displayed in our info window. Then we add a variable to hold our call to the info window method. We pass the my win variable to the info window method. Then finally we add an event listener to our marker. This is waiting for a click on our marker, and when that happens the open method will launch the info window. The map as well as the marker are passed through this info window. Go ahead and save the file and preview. Now if you click on the marker, the info window should open up. In addition to markers and info windows, we can add shapes, lines, symbols, and ground overlays to our maps. Let's add an animated circle to the Statue of Liberty. First let's remove the my win variable and the info window call. We won't remove the event listener, and instead we will edit it in a moment. Then we add a call to the Google Maps circle method. This is how we add a circle to our map. But bear in mind, it won't be displayed yet. Next we will change the event listener. Now here, we have added the map as the target of the event listener. When the map is zoomed in or out, we will set options on our circle. Most of the settings are just the color and then levels of transparency. Then we have our map, which actually binds our circle to our map. This causes the circle to appear when we zoom the map. Then we have our map that actually binds our circle to the map. Then we have the center and radius setting which are specific to our circle. Go ahead and save the file and preview. Now when the map comes up no circle is present, but if we zoom in around. The circle then appears. This is a very simple example, but there are lot of different things that I could do with drawing on a map. Now that's everything you need to know to get started with Google Maps. Hopefully, you can come up with some creative ways to use the APIs.