Pset8, addMarker: Need help in understanding documentation in google.maps.Marker

Question

So I've been stuck on pset8 for awhile at the function addMarker(place) function in scripts.js

I realised that I struggled to understand the documentation listed out in: https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerLabel

function addMarker(place)
{
    var myLatlng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude));
    var marker = new google.maps.Marker({
    position: myLatlng,
    label: place.place_name + ", " + place.admin_name1,
    icon: {
        url: 'https://maps.google.com/mapfiles/kml/pal2/icon31.png',
        labelOrigin: new google.maps.Point(11,40)

    }
    //anchorPoint: new google.maps.MarkerOptions.Point(0,32) 

    });

       marker.setMap(map);
}

The documentations states:

"google.maps.MarkerLabel object specification

These options specify the appearance of a marker label. A marker label is a single character of text which will appear inside the marker. If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class"

I naturally thought I'd need to use new google.maps.MarketLabel instead of new google.maps.Marker when i'm defining my var marker. I was wrong.

I only manage to get how to do this part after accidentally googling someone's answer..

---

My question is: How is one suppose to know that we are to stick to new google.maps.Marker and declare within icon class, and use labelOrigin: new google.maps.Point(11,40) instead?

More specifically, how am i suppose to know that i needed to declare new google.maps.Point(11,40) inside of labelOrigin?

1. from google.map.Marker it doesn't state anything about labelOrigin
2. labelOrigin is only found in the Object, google.maps.MarkerLabel inside the documentation.

Thanks in advance for your patience in helping a noob read documentations better!

Answer 1

Take a look at the general documentation of markers by Google here: https://developers.google.com/maps/documentation/javascript/markers. Start by reading what a marker is and how you create a new marker and add it to the map. Then read, a few scrolls bellow it, what a marker label is and how you can use it inside your marker. It has for example the following code:

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

In that case, the marker is created, and the label appears where the marker is.

Hope this helps!