Demo

Clustering

This example displays the list of Mac Donald's in France using the clustering function.
The list of Mac Donald's is stored in a json object.
To render clusters, this example uses some classes defined in the CSS file (cluster, cluster-1, cluster-2, cluster-3).

Try to zoom and move your mouse over and out of the markers.

$("#test").gmap3({
  map:{
    options: {
      center:[46.578498,2.457275],
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  },
  marker: {
    values: macDoList,
    cluster:{
      radius:100,
      // This style will be used for clusters with more than 0 markers
      0: {
        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
        width: 53,
        height: 52
      },
      // This style will be used for clusters with more than 20 markers
      20: {
        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
        width: 56,
        height: 55
      },
      // This style will be used for clusters with more than 50 markers
      50: {
        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
        width: 66,
        height: 65
      }
    },
    options: {
      icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png")
    },
    events:{
      mouseover: function(marker, event, context){
        $(this).gmap3(
          {clear:"overlay"},
          {
          overlay:{
            latLng: marker.getPosition(),
            options:{
              content:  "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
                          "<div class='bg'></div>" +
                          "<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
                        "</div>" +
                        "<div class='arrow'></div>",
              offset: {
                x:-46,
                y:-73
              }
            }
          }
        });
      },
      mouseout: function(){
        $(this).gmap3({clear:"overlay"});
      }
    }
  }
});

Context menu (right menu) on Google Maps

This example describes how to create a google map like interface with a right menu. It is quite complete to show how to use both gmap3 and google map to get an advanced interface.

The menu is created using a custom class to get a clear code.
The map is initialised and events are binded to show the custom menu on right click and to manage some actions.
It will be hidden automatically after some seconds on mouse out.
Using this menu, it is possible to zoom in, zoom out, center the map and set directions on the map.
This menu displays icons using CSS.

Right click on the map.

var menu = new Gmap3Menu($("#test")),
  current,  // current click event (used to save as start / end position)
  m1,       // marker "from"
  m2;       // marker "to"

// update marker
function updateMarker(marker, isM1){
  if (isM1){
    m1 = marker;
  } else {
    m2 = marker;
  }
  updateDirections();
}

// add marker and manage which one it is (A, B)
function addMarker(isM1){
  // clear previous marker if set
  var clear = {name:"marker"};
  if (isM1 && m1) {
    clear.tag = "from";
    $("#test").gmap3({clear:clear});
  } else if (!isM1 && m2){
    clear.tag = "to";
    $("#test").gmap3({clear:clear});
  }
  // add marker and store it
  $("#test").gmap3({
    marker:{
      latLng:current.latLng,
      options:{
        draggable:true,
        icon:new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green" + (isM1 ? "A" : "B") + ".png")
      },
      tag: (isM1 ? "from" : "to"),
      events: {
        dragend: function(marker){
          updateMarker(marker, isM1);
        }
      },
      callback: function(marker){
        updateMarker(marker, isM1);
      }
    }
  });
}

// function called to update direction is m1 and m2 are set
function updateDirections(){
  if (!(m1 && m2)){
    return;
  }
  $("#test").gmap3({
    getroute:{
      options:{
        origin:m1.getPosition(),
        destination:m2.getPosition(),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      },
      callback: function(results){
        if (!results) return;
        $("#test").gmap3({get:"directionrenderer"}).setDirections(results);
      }
    }
  });
}

// MENU : ITEM 1
menu.add("Direction to here", "itemB", 
  function(){
    menu.close();
    addMarker(false);
  });

// MENU : ITEM 2
menu.add("Direction from here", "itemA separator", 
  function(){
    menu.close();
    addMarker(true);
  })

// MENU : ITEM 3
menu.add("Zoom in", "zoomIn", 
  function(){
    var map = $("#test").gmap3("get");
    map.setZoom(map.getZoom() + 1);
    menu.close();
  });

// MENU : ITEM 4
menu.add("Zoom out", "zoomOut",
  function(){
    var map = $("#test").gmap3("get");
    map.setZoom(map.getZoom() - 1);
    menu.close();
  });

// MENU : ITEM 5
menu.add("Center here", "centerHere", 
  function(){
      $("#test").gmap3("get").setCenter(current.latLng);
      menu.close();
  });

// INITIALIZE GOOGLE MAP
$("#test").gmap3({
  map:{
    options:{
      center:[48.85861640881589, 2.3459243774414062],
      zoom: 5
    },
    events:{
      rightclick:function(map, event){
        current = event;
        menu.open(current);
      },
      click: function(){
        menu.close();
      },
      dragstart: function(){
        menu.close();
      },
      zoom_changed: function(){
        menu.close();
      }
    }
  },
  // add direction renderer to configure options (else, automatically created with default options)
  directionsrenderer:{
    divId:"directions",
    options:{
      preserveViewport: true,
      markerOptions:{
        visible: false
      }
    }
  }
});