Google Map Markers with Labels

Google Map, Javascript

Google Map has a nice support library that allows you to create markers with labels attached. This is nice to let the map visitor have a quick idea what the pins on a map represents. You can make your labels simply digits to number the pins, alpha characters to index the pins, or add a short word or phrase to each pin. Very nice.

If you are looking to add labels to your markers on a Google Map, the following links are important to you:

Use of the library is simple, simply:

  1. Include the markerwithlabel.js library
  2. Make a marker using “new markerwithlabel” (see the example page link above)

    3. QED

Note, the new MarkerWithLabel allows you to add a few new parameters that define the label. Simply replace the old “new marker” declaration with a declaration of the following format:

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

It’s great, use it.

Leave a Reply