Esa's Google Maps API experiments

ResultsMap Kitchen [part 5]ZMarker

Z-index switching.

Actually there are too many markers on this map. To make it work better we load even more features to GMarker. That is not the right direction of development but we examine that before we try simplifying the marker and minimising the number of markers shown at a time.

See what happens when you click a marker in a crowded place. It comes in front of others when clicked and it is thrown behind others when the infowindow is closed. You can reach any marker by first clicking the markers that are in front of it.

Z-index of a marker is increased when infowindow is opened by clicking marker or sidebar. Z-index is lowered when the infowindow is closed.

Color swapping.

Each marker category has a color of its own. Furthermore there are different colors for 'hover' and 'visited'. Just like links. You can even specify individual 'hover' and 'visited' colors if you like many colors.

MapIconMaker

The slightly transparent markers are generated by Google Charts API using MapIconMaker open source javascript.

GMap2.createZMarker()

The method creates a GMarker that has both the z-index switching and color swapping behaviour. var marker = map.createZMarker(point, opt_options) creates and addOverlays the marker and returns a reference to the marker.

All the GMarker methods can be used. The optional options take all the GMarker options plus color swap images: hoverImage and visitedImage. If they are not given, default images DEFAULT_ZMARKER_HOVER_IMAGE and DEFAULT_ZMARKER_VISITED_IMAGE are used.

createZMarker() will be part of MapKitchen JavaScript library.

Blog
Part[4] Collapsible sidebar.
Part[3] Marker categories.
Part[2] Markers from a text file.
Part[1] Polyline from a text file.
More experiments.

 

/**
 * GMap2.createZMarker()  method. Creates a GMarker with special behaviour
 * @param {Object} opt_options GMarker options plus {hoverImage: ,visitedImage:}
 * @return {GMarker} 
 * Author: Esa 2006, 2007, 2008, ver1.2
 */
// A property  that contains the number of zIndexProcess function recursions
GMap2.prototype.zMarkerIndexReference = 1;
// A method that returns the the z-index offset for the next zIndexProcess recursion
GMap2.prototype.getZMarkerIndexOffset = function(koeff){
  this.zMarkerIndexReference++;
  koeff = koeff||1000000;
  this.zMarkerIndexOffset = this.zMarkerIndexReference * koeff  ;
  return this.zMarkerIndexOffset;
}
GMap2.prototype.createZMarker = function (point,opt_options) {
  var zMarker = {};
  var opts = opt_options||{};
  var map_ = this;
  var zIndex;
  function sendBack(marker,b) {
    zIndex = GOverlay.getZIndex(point.lat());
    if(!zMarker.isOverlayed){
      return zIndex;
    }
    if(map_.getInfoWindow().isHidden()){
      zIndex = zIndex-map_.getZMarkerIndexOffset();
      return zIndex;
    }
    zIndex = zIndex+map_.getZMarkerIndexOffset();
    return zIndex;
  }
  opts.zIndexProcess = sendBack;
  zMarker.isOverlayed = false;
  zMarker = new GMarker(point,opts);
  map_.addOverlay(zMarker);
  zMarker.isOverlayed = true;
  if(opts.idleImage)zMarker.setImage(opts.idleImage);
  zMarker.visited = opts.visited||false;
  var idleImage = zMarker.getIcon().image;
  var hoverImage = opts.hoverImage||DEFAULT_ZMARKER_HOVER_IMAGE;
  var visitedImage = opts.visitedImage||DEFAULT_ZMARKER_VISITED_IMAGE;
  GEvent.addListener(zMarker, "infowindowclose", function() {
    zMarker.visited = true;
    zMarker.infoIsOpen = false;
    GEvent.trigger(zMarker,"mouseout");
  });
  GEvent.addListener(zMarker, "click", function() {
    zMarker.setImage(hoverImage);
    zMarker.infoIsOpen = true;
  });
  GEvent.addListener(zMarker,'mouseover',function(){
    if(hoverImage){
      zMarker.setImage(hoverImage);
    }
  });
  GEvent.addListener(zMarker,'mouseout',function(){
    if(!this.infoIsOpen){
      if(zMarker.visited){
        if(visitedImage)zMarker.setImage(visitedImage);
      }else{
        zMarker.setImage(idleImage);
      }
    }
  });
  return zMarker;
}