Google Maps Labelling

Labelling

Labels, a mapping element well used in the GIS / cartography community which is surprisingly little used in the geoweb community. They can add a great deal of explanation to the mapping interface. Instead of explicitly explaining each point, it is done for me on the map. Nice!

There is no real default option for Google Maps to make labels on markers. However there is a wonderful javascript extension developed by Gary Little, which is included in the Google Maps Utility Library. Excellent people and resources like these emphasize the burgeoning ecology around the whole gmaps “thing”!

Anyhoo, I won’t dig into Mr little’s magnificent masterpiece, suffice to say it works flawlessly and leaves us developers with the opportunity of a marker object which can hold a label. Woot! That was easy! Better, we can leverage the power of CSS to style the label how we please. Thusly perhaps:

.labels {color: white;font-size: 36px;font-weight: bold;text-align: right;white-space: nowrap;}

I have added the below code to one of the maps we looked at in the focus post. I have built an array of fictitious wildlife sightings will add labels to them.

//an array ready to fill with points and the data array of sightings!
var poiArray = [];
var markerData = [
["FC-01",-122.848778,53.945580,"Moose"],
["FC-02",-122.728958,53.939518,"Cougar"],
["FC-03",-122.647591,53.888962,"Bear"],
["FC-04",-122.833328,53.900089,"Wolf"],
["FC-05",-122.824059,53.886940,"Martin"]
];

//design a marker image, in this case a white cross

var image = new google.maps.MarkerImage(‘http://snippets.sparkgeo.com/pics/labels/white-cross.png’,
new google.maps.Size(10,10),
new google.maps.Point(0,0),
new google.maps.Point(0,0));			

//pull in each marker to the map and give it the icon and the label it…
//note, content comes from my data array, the class references the style class (above, nice!)
//anchor puts it in the right place and label style allows us to make any style amendments we want to make, like opacity 

for (var i = 0; i < markerData.length; i++) {
var animal = markerData[i];
var myLatLng = new google.maps.LatLng(animal[2], animal[1]);
var marker = new MarkerWithLabel({
  clickable: false,
  draggable: false,
  position: myLatLng,
  map: map,
  icon: image,
  labelContent: animal[3],
  labelClass: "labels",
  labelAnchor: new google.maps.Point(-10,0),
  labelStyle: {opacity:0.8}

});
  poiArray.push(marker);
}

Well, that was pretty painless thanks to makerWithLabel.js check out my demo here:

PG Wildlife