GEOG 863
GIS Mashups for Geospatial Professionals

Adding Markers to a Google Map

PrintPrint

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 follow the link to the Marker part of the page. (Marker is the first class under the Overlays heading.)

    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 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 part of the page.

    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 roughly dozen 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.
    We saw the LatLng class used in the Hello World example to specify the map's center. Let's see what the documentation says about it.
  3. Follow the LatLng link to jump to its section.

    The LatLng class constructor lists two required parameters (lat and lng). As we've already seen, 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 lesson2.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 create two LatLng objects with the same coordinates, let's create the object once, store a reference to that object in a variable, then use the variable to set both the map's center and the marker's position.
  5. After the creation of the Map object, add the following line to create a new LatLng object and store a reference to it in a variable called latlng:

    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 marker = 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 map property of the MarkerOptions object. Here is the complete Initialize function if you'd like to confirm that you wrote it correctly:

    function initialize() {
      var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    
      var myMap = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
     
      var myLatLng = new google.maps.LatLng(-34.397, 150.644);
      var myMarkerOptions = {
        position: myLatLng,
        map: myMap
      }
     
      var marker = new google.maps.Marker(myMarkerOptions);
    }

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.