GEOG 863
GIS Mashups for Geospatial Professionals

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.  (You'll probably find the class's entry in the Contents list first, so click on that entry to jump down to the desired section of the documentation.)

    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. 
  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 initialize() 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 and mapOptions. 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 MapOptions object from mapOptions to myMapOptions.  This requires updating the second argument to the Map class constructor.
  11. 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 myMapOptions = {
        center: { lat: -34.397, lng: 150.644},
        zoom: 8
      var myMap = new google.maps.Map(document.getElementById('map-canvas'),
      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 initialize() function was written above, that's good because I'll be expecting you to write the code more efficiently as part of your assignment. laugh