To create a labeled marker, create a new LabeledMarker, and specify the relevant options. The most important options are icon, labelText and labelOffset. Then you can assign it event listeners and add it to the map just as you would with a GMarker object.
var latlng = new GLatLng(48.25, 11.00); var icon = new GIcon(); icon.image = 'red_marker.png'; icon.iconSize = new GSize(32, 32); icon.iconAnchor = new GPoint(16, 16); icon.infoWindowAnchor = new GPoint(25, 7); opts = { "icon": icon, "clickable": true, "labelText": "A", "labelOffset": new GSize(-6, -10) }; var marker = new LabeledMarker(latlng, opts); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("I'm a Labeled Marker!"); }); map.addOverlay(marker);
View example (simplelabeledmarker.html).
Most likely, you'll want to use LabeledMarker to display multiple markers with different text for each marker, and you'll also want to tweak the style of the marker text. Just make sure you test your labeled markers in the various browsers and operating systems, as CSS interpretation can vary. The default CSS classname used by LabeledMarker is LabeledMarker_markerLabel. If you define that in a CSS file, it will automatically be picked up by the marker label div. Alternatively, you can use an alternate classname and pass that in LabeledMarkerOptions in the labelClass property. The following example defines the default LabeledMarker_markerLabel:
div.LabeledMarker_markerLabel { color: black; font-family: Arial; width: 32px; text-align: center; }
You can also use LabeledMarker with the GMarker.setImage property, if you'd like to implement image-change on mouseovers or other marker events. The following code will achieve a mouse-over effect:
GEvent.addListener(marker, "mouseover", function() { marker.setImage('http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/yellowcirclemarker.png'); }); GEvent.addListener(marker, "mouseout", function() { marker.setImage('http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png'); });
This example of the most popular Airports in the world defines the LabeledMarker style and implements a mouse-over effect as shown above, and uses Google Spreadsheets as the data source for the markers. View example (airportmap.html).
The following advanced example creates multiple markers based on information stored in JSON format. You could choose to represent your data in XML format, using very similar code. It also uses more CSS definitions to create a sidebar with a style similar to the markers on the map.