Basic Map Types

by hoogw

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

/*
 * This demo demonstrates how to replace default map tiles with custom imagery.
 * In this case, the CoordMapType displays gray tiles annotated with the tile
 * coordinates.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/**
 * @constructor
 * @implements {google.maps.MapType}
 */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.maxZoom = 19;
CoordMapType.prototype.name = 'Tile++++++';
CoordMapType.prototype.alt = 'Tile=========';

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  var tile_url = 'https://tile.openstreetmap.org/' +zoom+ '/' +coord.x + '/' +coord.y + '.png'
 var _width = this.tileSize.width + 'px';
  var _height = this.tileSize.height + 'px';
 
   var x = document.createElement("IMG");
    x.setAttribute("src", tile_url);
    x.setAttribute("width", _width);
    x.setAttribute("height", _height);
    x.setAttribute("alt", "tile");
   
  
  /*
  div.innerHTML = tile_url;
 
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '3px';
  div.style.borderColor = '#AAAAAA';
  div.style.backgroundColor = '#3b6a97';
  */
  
  return x;
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 41.850, lng: -87.650},
    streetViewControl: false,
    mapTypeId: '111coordinate111',
    mapTypeControlOptions: {
      mapTypeIds: [ 'roadmap','111coordinate111'],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });

  map.addListener('maptypeid_changed', function() {
    var showStreetViewControl = map.getMapTypeId() !== 'coordinate';
    map.setOptions({
      streetViewControl: showStreetViewControl
    });
  });

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('111coordinate111',
                   new CoordMapType(new google.maps.Size(256,256)));
}