StichMaps

google maps downloader

by Johan Vandeplas

HTML

<canvas id="myCanvas" width="8000" height=8000></canvas>

CSS

canvas {
  color: white
}

JavaScript

var key = "AIzaSyDVdvhWkbKyAdnrZeK9sMpEZGHpd1-Zypw",
  zoomLevel = 18,
  x = 4.3925197,
  y = 51.1225911,
  hoffset = 0.00343,
  voffset = -0.002075,
  getUrl = function(x, y) {
    return "https://maps.googleapis.com/maps/api/staticmap?size=640x640&zoom=" + zoomLevel + "&center=" + y + "," + x + "&format=png&key=" + key;
  }, 
  //No POI Labels add:
  //style=feature:poi|element:labels|visibility:off& 
  canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d'),
  drawImageAt = function(p, c) {
    var imgObj = new Image();
    imgObj.onload = function() {
      context.drawImage(this, p.x, p.y);
    }
    imgObj.src = getUrl(c.x, c.y);
  };

var max = 12;

for (var j = 0; j <= max; j++) {
  for (var i = 0; i <= max; i++) {
    console.log(j, 'x', i, '=>', x + (i * hoffset), '-', y + (j * voffset));
    drawImageAt({
      x: i * 640,
      y: (j * 618)
    }, {
      x: x + (i * hoffset),
      y: y + (j * voffset)
    });
  }
}