abernier/index.css

## index.css
html, body {height:100%; overflow:hidden;}
body {margin:0;}

.map {width:100%; height:100%;}

.marker {/*display: block;width: 3em;height: 4em;background: red;*/ color:hotpink; font-size:200%;}

.ui-tooltip {position:absolute; display:inline-block; background:infoBackground; box-shadow:0 0 1em; -webkit-transition:all .3s;}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title></title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="map"></div>

  <script src="http://underscorejs.org/underscore-min.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzwrTYM6uR1shidwSvUkJ6ORjKPzdBWA4&sensor=true&libraries=geometry"></script>
  <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
  <script src="index.js"></script>
</body>
</html>

## index.js
// New map on Paris
var map = new google.maps.Map($('.map').get(0), {
  center: new google.maps.LatLng(48.8742, 2.3470),
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  zoom: 16
});

// http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
function CustomMarker(latlng, map) {
  this.latlng_ = latlng;

  // Once the LatLng and text are set, add the overlay to the map.  This will
  // trigger a call to panes_changed which should in turn call draw.
  this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  var me = this;

  // Check if the div has been created.
  var $div = this.$div;
  if (!$div) {
    // Create a overlay text DIV
    $div = this.$div = $('<div class="marker" title="foo">★</div>').css({position: 'absolute'});

    // Then add the overlay to the DOM
    var panes = this.getPanes();
    panes.overlayImage.appendChild($div[0]);
  }

  var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    $div.css({
      left: point.x + 'px',
      top: point.y + 'px'
    });
  }

  //this.position();
};
CustomMarker.prototype.position = function () {
  //console.log('position!');

  var map = this.map;
  var mapEl = map.getDiv();
  var bounds = map.getBounds();
  var pos = this.getPosition();

  if (!bounds.contains(pos)) {
    /*var posLat = pos.lat();
    var posLng = pos.lng();

    // top/right
    var ne = bounds.getNorthEast();
    var onRight = posLng >= ne.lng();
    var onTop = posLat >= ne.lat();

    // left/bottom
    var sw = bounds.getSouthWest();
    var onLeft = posLng <= sw.lng();
    var onBottom = posLat <= sw.lat();

    var klass = [];
    onLeft && (klass.push('left'));
    onTop && (klass.push('top'));
    onRight && (klass.push('right'));
    onBottom && (klass.push('bottom'));*/

    if (!this.$div.data('tooltip')) {
      this.$div.tooltip({
        content: 'hey!',
        position: {
          my: "center top", // tooltip
          at: "center bottom",
          within: mapEl,
          collision: "fit"
        },
        show: false,
        hide: false,
        disabled: true
      });
    }

    if (!this.$div.data('tooltip')._find(this.$div).length) {
      //console.log('open');
      this.$div.tooltip('enable').tooltip('open');
    }
    var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());
    $('#'+this.$div.attr('aria-describedby')).position({
      my: "center top", // tooltip
      at: "center bottom",
      within: mapEl,
      of: this.$div,
      collision: "fit"
    }).html(~~distance+'m');


    //var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());

    //console.log('out', klass.join(', '), ~~distance);
  } else {
    if (this.$div.data('tooltip')) {
      this.$div.tooltip('disable').tooltip('close');
    }
  }
};
CustomMarker.prototype.remove = function() {
  // Check if the overlay was on the map and needs to be removed.
  if (this.$div) {
    this.$div.remove();
    this.$div = undefined;
  }
};
CustomMarker.prototype.getPosition = function() {
 return this.latlng_;
};


google.maps.event.addListenerOnce(map, 'idle', function(){
  var markers = []; window.markers = markers;
  var ne = map.getBounds().getNorthEast();
  var sw = map.getBounds().getSouthWest();
  var deltaLat = ne.lat() - sw.lat();
  var deltaLng = ne.lng() - sw.lng();
  for (var i = 0; i<1000; i++) {
    markers.push(new CustomMarker(new google.maps.LatLng(sw.lat() + Math.random()*deltaLat, sw.lng() + Math.random()*deltaLng), map));
  }

  var markerCluster = new MarkerClusterer(map, markers); window.markerCluster = markerCluster;

  /*google.maps.event.addListener(map, 'bounds_changed', _.debounce(function () {
    google.maps.event.addListenerOnce(map, 'idle', function () {
      var i = markers.length;
      while (--i) {
        markers[i].position();
      }
    });
  }, 10));*/
});


// map.getBounds().contains(marker.getPosition())
	html, body {height:100%; overflow:hidden;}
	body {margin:0;}

	.map {width:100%; height:100%;}

	.marker {/display: block;width: 3em;height: 4em;background: red;/ color:hotpink; font-size:200%;}

	.ui-tooltip {position:absolute; display:inline-block; background:infoBackground; box-shadow:0 0 1em; -webkit-transition:all .3s;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<title></title>
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<div class="map"></div>

	<script src="http://underscorejs.org/underscore-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzwrTYM6uR1shidwSvUkJ6ORjKPzdBWA4&sensor=true&libraries=geometry"></script>
	<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	// New map on Paris
	var map = new google.maps.Map($('.map').get(0), {
	center: new google.maps.LatLng(48.8742, 2.3470),
	mapTypeId:google.maps.MapTypeId.ROADMAP,
	zoom: 16
	});

	// http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html
	function CustomMarker(latlng, map) {
	this.latlng_ = latlng;

	// Once the LatLng and text are set, add the overlay to the map. This will
	// trigger a call to panes_changed which should in turn call draw.
	this.setMap(map);
	}
	CustomMarker.prototype = new google.maps.OverlayView();
	CustomMarker.prototype.draw = function() {
	var me = this;

	// Check if the div has been created.
	var $div = this.$div;
	if (!$div) {
	// Create a overlay text DIV
	$div = this.$div = $('<div class="marker" title="foo">★</div>').css({position: 'absolute'});

	// Then add the overlay to the DOM
	var panes = this.getPanes();
	panes.overlayImage.appendChild($div[0]);
	}

	var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
	if (point) {
	$div.css({
	left: point.x + 'px',
	top: point.y + 'px'
	});
	}

	//this.position();
	};
	CustomMarker.prototype.position = function () {
	//console.log('position!');

	var map = this.map;
	var mapEl = map.getDiv();
	var bounds = map.getBounds();
	var pos = this.getPosition();

	if (!bounds.contains(pos)) {
	/*var posLat = pos.lat();
	var posLng = pos.lng();

	// top/right
	var ne = bounds.getNorthEast();
	var onRight = posLng >= ne.lng();
	var onTop = posLat >= ne.lat();

	// left/bottom
	var sw = bounds.getSouthWest();
	var onLeft = posLng <= sw.lng();
	var onBottom = posLat <= sw.lat();

	var klass = [];
	onLeft && (klass.push('left'));
	onTop && (klass.push('top'));
	onRight && (klass.push('right'));
	onBottom && (klass.push('bottom'));*/

	if (!this.$div.data('tooltip')) {
	this.$div.tooltip({
	content: 'hey!',
	position: {
	my: "center top", // tooltip
	at: "center bottom",
	within: mapEl,
	collision: "fit"
	},
	show: false,
	hide: false,
	disabled: true
	});
	}

	if (!this.$div.data('tooltip')._find(this.$div).length) {
	//console.log('open');
	this.$div.tooltip('enable').tooltip('open');
	}
	var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());
	$('#'+this.$div.attr('aria-describedby')).position({
	my: "center top", // tooltip
	at: "center bottom",
	within: mapEl,
	of: this.$div,
	collision: "fit"
	}).html(~~distance+'m');


	//var distance = google.maps.geometry.spherical.computeDistanceBetween(pos, map.getCenter());

	//console.log('out', klass.join(', '), ~~distance);
	} else {
	if (this.$div.data('tooltip')) {
	this.$div.tooltip('disable').tooltip('close');
	}
	}
	};
	CustomMarker.prototype.remove = function() {
	// Check if the overlay was on the map and needs to be removed.
	if (this.$div) {
	this.$div.remove();
	this.$div = undefined;
	}
	};
	CustomMarker.prototype.getPosition = function() {
	return this.latlng_;
	};


	google.maps.event.addListenerOnce(map, 'idle', function(){
	var markers = []; window.markers = markers;
	var ne = map.getBounds().getNorthEast();
	var sw = map.getBounds().getSouthWest();
	var deltaLat = ne.lat() - sw.lat();
	var deltaLng = ne.lng() - sw.lng();
	for (var i = 0; i<1000; i++) {
	markers.push(new CustomMarker(new google.maps.LatLng(sw.lat() + Math.random()deltaLat, sw.lng() + Math.random()deltaLng), map));
	}

	var markerCluster = new MarkerClusterer(map, markers); window.markerCluster = markerCluster;

	/*google.maps.event.addListener(map, 'bounds_changed', _.debounce(function () {
	google.maps.event.addListenerOnce(map, 'idle', function () {
	var i = markers.length;
	while (--i) {
	markers[i].position();
	}
	});
	}, 10));*/
	});


	// map.getBounds().contains(marker.getPosition())