A lightweight marker for Google Maps: the SimpleMarker class

Lately I have been working a lot with the Google Maps API V3. In many cases you want to display a high count of markers, but the default google.maps.Marker acts horribly slow when shown in large numbers. Because of this, the concept of "Lightweight Markers" has been invented. Basically you implement an abstract class for an overlay that keeps the marker-object in the DOM hierarchy as simple as possible. There are various implementations of lightweight markers, some of them have more and some of them less features.

My implementation reduces the marker to the very basic needs of a marker. In the DOM hierarchy, it is a single div-object. You can add a click listener, and change various parameters. The constructor of a SimpleMarker looks as following:

SimpleMarker(
  map: google.maps.Map,
  position: google.maps.LatLng,
  opts?: SimpleMarkerOptions)

Hereby, SimpleMarkerOptions is a set of these parameters:

  • id: String
    A unique identifier that will also become the ID of the created div-node
  • image: String
    The path to an image file that will represent the marker
  • dimension: google.maps.Size
    The dimensions of the marker in pixels
  • anchor: google.maps.Point
    The point (in pixels) of the marker that shall be linked with its LatLng position
  • classname: String
    An identifier that will be set as the div-node's css class
  • title: String
    A text that will be displayed as tooltip when the user hovers the marker

All these parameters are filled with defaults. This means that you can create a marker on the map with a single line:

new SimpleMarker(jMap, new google.maps.LatLng(50.7658, 6.1059));

Additional to the basic methods for setting and getting the markers position, I've implemented a getBounds() function that may be useful if you want to implement a clustering engine. I will present my own clusterer here in the next few days. You can view a demonstration of the SimpleMarker here: SimpleMarker demonstration on demo.k621.de.

The following code creates a marker where the appearance of the marker is adjusted:

new SimpleMarker(
  jMap,
  new google.maps.LatLng(50.7572, 6.1453),
  {
    id: 'myMarker',
    image: 'greendot.png',
    dimension: new google.maps.Size(48,48),
    anchor: new google.maps.Point(24,24),
    title: 'Simple, isn\'t it?'
  }
);

Now, the div-node will have a custom image and additionally a tooltip text when you hover the marker. The DOM node that is going to be created gets the ID given in the parameters. This means that you can add a cascading style sheet (CSS) for exactly this ID and change further properties of appearance (e.g. the CSS3 box-shadow property if you want to have a simple dropshadow). If you want to influence a whole set of markers, you might also set the classname parameter and then use a CSS class. Please note that width, height, left, top and background-image will be overridden by the individual object parameters. You might try to override them yourself with the !important-flag, but it may break the behavement of the marker.

I've attached an uncompressed and compressed version of my SimpleMarker. The usage is very simple, just include the script and you're ready to go. For more details on how to use the marker, take a look at the source code of the example above. In the uncompressed version you'll also find the documentation to every method. I hope this marker class will be useful to you. If you find bugs or have suggestions, just send me an e-mail!

Attachments