Create a custom theme with google maps V3

Create a theme to display your own marker and cluster is really simple even if the explanation is quite long.
As google maps V2 and V3 are really different, maptimize theme is slighlty different for both versions.

We are going to describe how our default theme is implemented. It’s an image and a number that display Cluster#getPointsCount value for cluster and just 1 for markers.
Of course you can display any information you want. We’ll see that later

1 – Theme object

The first thing to do is to add an option on com.maptimize.MapController to set a theme object.

// Attach maptimize controller to map object
var mapController = new com.maptimize.MapController(map, {theme: myTheme});

A theme object must implement two methods: createMarker and createCluster

2 – `createMarker`

This method is called to display a single marker and must return an google.maps.OverlayView object.
createMarker has to return an instance of this class.
Maptimize has already an OverlayView object to display an image and and numnber. This class is com.maptimize.LabeledMarker.

Let see the code first!

createMarker: function(marker) {
  var options = myTheme._getMarkerOptions()[0];
  options.labelText = 1;
  return new com.maptimize.LabeledMarker(marker.getGLatLng(), options);
}

com.maptimize.LabeledMarker takes two parameters:

a GLatLang value given by the marker
an options hash map. This hash map have three keys:
- labelText is the text to display, “1” for a single marker
- labelClass is a CSS class name apply to the HTML used to display the marker
- icon is an object to describe the marker icon

In our example we use myTheme._getMarkerOptions()[0] to fill options (you can download the full code at the end of this tutorial).
myTheme._getMarkerOptions()[0] is:

  { icon:        { image:            "http://v2.maptimize.com/images/maps/marker8.png",
                   iconAnchor:       new google.maps.Point(11, 33) },
    labelClass:  'maptimize_marker_0'},

2 – `createCluster`

This method is called to display a cluster and must return an google.maps.OverlayView object. We do a difference between a cluster that could be expanded on the map when you click on it and a cluster that contains points at the same location.
In the last case, zoom in on click doesn’t make sense. This cluster acts as a single marker with multiple data. Our default theme handle them and doesn’t use the same image to make a visual difference for the user.

createCluster handles those two use cases by displaying different icons on the map.

createCluster: function(cluster) {
  var count = cluster.getPointsCount(),
      index = parseInt(Math.log(count) / Math.log(10)),
      options;
  if (cluster.canExpandOnMap()) {
    options = myTheme._getClusterOptions();
  } else {
    options = myTheme._getMarkerOptions();
  }
  options = options[Math.min(options.length - 1, index)];
  options.labelText = count;
  return new com.maptimize.LabeledMarker(cluster.getGLatLng(), options);
}

Except this test cluster.canExpandOnMap(), it’s excatly the same code that we did for createMarker.

3 – CSS

Text, font, text position is done by CSS.
Here is our CSS for default Maptimize theme.

/* Marker */
.maptimize_marker_0, .maptimize_marker_1, .maptimize_marker_2, .maptimize_marker_3 {
  font-weight: bold;
  text-align:center;  
  cursor: pointer;
  color:#FFFFFF;
  font-size:11px;
  font-family: arial;
  height: 28px;
  padding-top: 5px;
}

.maptimize_marker_0 {  width: 25px; }
.maptimize_marker_1 {  width: 25px; }
.maptimize_marker_2 {  width: 29px; }
.maptimize_marker_3 {  width: 33px; }

/* Cluster */
.maptimize_cluster_0, .maptimize_cluster_1, .maptimize_cluster_2, .maptimize_cluster_3, .maptimize_cluster_4 {
  font-weight: bold;
  text-align:center;  
  cursor: pointer;
  color:#FFFFFF;
  font-size:11px;
  font-family: arial;
}

.maptimize_cluster_0 {  width: 50px;  height: 50px;  line-height: 50px; }
.maptimize_cluster_1 {  width: 55px;  height: 55px;  line-height: 55px; }
.maptimize_cluster_2 {  width: 62px;  height: 62px;  line-height: 62px; }
.maptimize_cluster_3 {  width: 71px;  height: 71px;  line-height: 73px; }
.maptimize_cluster_4 {  width: 82px;  height: 82px;  line-height: 82px; }

Code

You can view/download the full example here.

Tutorial