Marker With Label

Creating a Basic Marker

The example below shows how to use MarkerWithLabel to create a marker that has a label centered beneath it in a small box. The label can be styled most easily by defining a CSS class with the desired properties for the label DIV. In this example the class is called "labels" and this name is passed in the labelClass parameter to MarkerWithLabel. Additional styling information can be passed in the labelStyle parameter. The text of the label is passed in labelContent. Other parameters that can be passed to MarkerWithLabel are identical to those that can be passed to google.maps.Marker.

 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;     
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker1 = 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}
     });

     var iw1 = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });

View example (basic.html).

Creating a Lettered Marker

This example shows how to place a single character over the center of Google's default marker. Note the use of the labelInBackground property to ensure the label appears in the foreground (rather than in the background behind the marker).

 <style type="text/css">
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 </style>

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       map: map,
       draggable: true,
       raiseOnDrag: true,
       labelContent: "A",
       labelAnchor: new google.maps.Point(3, 30),
       labelClass: "labels", // the CSS class for the label
       labelInBackground: false
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });

View example (lettered.html).

Mouse Events

This example illustrates the mouse events that are fired when you interact with a marker with a label. You can also attach event listeners to "property changed" events. The marker here has been made draggable so you can see the events that are fired when the marker is moved around the map. (You can start the drag by clicking the marker portion or the label portion.)

 <style type="text/css">
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 </style>

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     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
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
     
     google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
     google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
     google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
     google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
     google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
     google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
     google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
     google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
     google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });

View example (events.html).

Pictures as Labels

This example illustrates that labelContent can also be set to any arbitrary HTML DOM node. In this case, the DOM node is a simple img element holding a picture. The picture label has an opacity of 0.50 to make it possible to see what's behind it on the map.

 <style type="text/css">
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 100px;     
     white-space: nowrap;
   }
 </style>

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var pictureLabel = document.createElement("img");
     pictureLabel.src = "home.jpg";

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

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });