Adding Markers to a Google Map

The Google Maps API allows developers to add points, lines and polygons to the map as overlays. Point overlays are the most common and are represented in the API as Marker objects. We'll use the API Reference as a guide to adding a marker to our map.

1. Open the API reference page and search the page (Ctrl-F) for the Marker class.
   
   Like many other classes in the API, the Marker class's listing in the API Reference includes a Constructor section. This indicates that an object of this class can be created using the new keyword followed by the class name (new google.maps.Marker). Inside the parentheses is a listing of the parameters that the developer must/can supply when creating the object. In the case of the Marker class, it has just one parameter called opts that is supplied using an object of the MarkerOptions class. The opts parameter has a ? beside it to indicate that it is an optional parameter.
2. Follow the MarkerOptions link to view its documentation.
   
   Note that this class does not have a Constructor section in its documentation. This indicates that creating an object of this class involves using the object literal notation that we encountered earlier when we created a MapOptions object. Of the many properties listed beneath MapOptions, two are particularly important:
   • position: set using a LatLng object defining the point where you want the marker to appear, and
   • map: set using a reference to the Map object on which the marker should be added. 
3. Follow the LatLng link to jump to its section.
   
   The LatLng class constructor lists two required parameters (lat and lng). As implied by their names, these parameters are specified using numbers representing the desired point's latitude and longitude. The third, optional, parameter can be set to True to allow for lat/lng values outside -90/+90 and -180/+180.
   
   So, with the information we've gathered from the API reference, we know that the steps for adding a marker to the map are to create a LatLng object, use that object to create a MarkerOptions object, then create a Marker object using the MarkerOptions object as an argument to the Marker class constructor.
4. Open your lesson3.html file in any text editor. We're going to add our marker in the same location that's being used for the map's center. Rather than specify the marker's position using an object literal as the Hello, World example specifies the map's center, let's create a LatLng object, store a reference to that object in a variable, then use the variable to set the marker's position.

5. Insert the following line to the end of the initMap() function:

   var latlng = new google.maps.LatLng(-34.397, 150.644);

6. Next, create a MarkerOptions object and set its position and map properties:
   
   

   var myMarkerOptions = {
      position: latlng,
      map: map
   }

7. Finally, create the Marker and add it to the map:
   
   

   var myMarker = new google.maps.Marker(myMarkerOptions);

8. Save the page and test it in your web browser.
   
   You may have noticed (and been confused) that latlng appears in the script as both the name of a variable and a class. The same goes for map. It's actually OK if this happens, but let's rename these variables to make the script a bit easier to follow.
9. Change the name of the variable that references the LatLng object from latlng to myLatLng. Note that changing this name requires updating the position property of the MarkerOptions object.
10. Change the name of the variable that references the Map object from map to myMap. This requires updating the lines where the variable is declared, where it's initialized and where the map property of the MarkerOptions object is set. Here is the complete script if you'd like to confirm that you wrote it correctly:
    
    

    var myMap;
    function initMap() {
      myMap = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    
      var myLatLng = new google.maps.LatLng(-34.397, 150.644);
    
      var myMarkerOptions = {
        position: myLatLng,
        map: myMap
      }
    
      var myMarker = new google.maps.Marker(myMarkerOptions);
    }
    

Going forward, you will not be expected to preface your variable names with "my" as we've done here.  My rationale for doing it here is to help clarify what's a variable (changeable) and what's a property or class (not changeable). 

Now that you've seen how to add a marker to a map, you're ready to modify your page so that it displays your hometown.  If you see problems with the way the initMap() function was written above, that's good because I'll be expecting you to write the code more efficiently as part of your assignment.