Maps API v3 Custom scale control

by Christian Bonato

HTML

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="scale">
  <div id="scale-value">
    20 m
  </div>
  <div id="scale-bar">

  </div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #444;
}

#map-canvas {
  height: 400px;
}

#scale {
  background-color: yellow;
  padding: 20px;
}

#scale-value {
  display: inline-block;
  margin-right: 1px;
}

#scale-bar {
  border-color: #444;
  border-width: 0 2px 2px 2px;
  border-style: solid;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 6px;
  width: 100px;
  display: inline-block;
}

JavaScript

var map;
var minScaleWidth = 50; // Minimum width of the scale in px
var maxScaleWidth = 80; // Maximum width of the scale in px

// Scale values in meters and display values
var scaleValues = [{
    val: 2,
    dspVal: '2 m'
  }, {
    val: 5,
    dspVal: '5 m'
  },
  {
    val: 10,
    dspVal: '10 m'
  },
  {
    val: 20,
    dspVal: '20 m'
  },
  {
    val: 50,
    dspVal: '50 m'
  },
  {
    val: 100,
    dspVal: '100 m'
  },
  {
    val: 200,
    dspVal: '200 m'
  },
  {
    val: 500,
    dspVal: '500 m'
  },
  {
    val: 1000,
    dspVal: '1 km'
  },
  {
    val: 2000,
    dspVal: '2 km'
  },
  {
    val: 5000,
    dspVal: '5 km'
  },
  {
    val: 10000,
    dspVal: '10 km'
  },
  {
    val: 20000,
    dspVal: '20 km'
  },
  {
    val: 50000,
    dspVal: '50 km'
  },
  {
    val: 100000,
    dspVal: '100 km'
  },
  {
    val: 200000,
    dspVal: '200 km'
  },
  {
    val: 500000,
    dspVal: '500 km'
  },
  {
    val: 1000000,
    dspVal: '1000 km'
  },
  {
    val: 2000000,
    dspVal: '2000 km'
  },
  {
    val: 5000000,
    dspVal: '5000 km'
  }
];

function initialize() {

  var myLatLng = new google.maps.LatLng(46.8, 6.19);
  var mapOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  google.maps.event.addListener(map, 'idle', makeScale);
}

function makeScale() {

  let zoom = map.getZoom();

  // Calculate the width of 1 map pixel in meters
  // Based on latitude and zoom level
  // See https://groups.google.com/d/msg/google-maps-js-api-v3/hDRO4oHVSeM/osOYQYXg2oUJ
  let scale = 156543.03392 * Math.cos(map.getCenter().lat() * Math.PI / 180) / Math.pow(2, zoom);

  let minScale = Math.floor(scale * minScaleWidth);
  let maxScale = Math.ceil(scale * maxScaleWidth);

  // Loop through scale values
  for (var i = 0; i < scaleValues.length; i++) {

    if (i !== scaleValues.length - 1) {

      // Select...