Complex styled maps

by Wolf

HTML

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

var streetMapOverlayStyle = [{
    "elementType": "geometry.fill",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [{
        "color": "#ffffff"
      },
      {
        "weight": 3.0
      }
    ]
  }
];

var styledMapOptions = {
  name: 'Street Overlays'
};

var agriTypeOptions = {};

var agriMapType;

function initMap() {
  agriTypeOptions = {
    getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
        return null;
      }
      var bound = Math.pow(2, zoom);
      var url = "http://agri.openstreetmap.org/" +
        zoom + "/" + normalizedCoord.x + "/" +
        normalizedCoord.y + ".png";
      return url;
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 18,
    minZoom: 5,
    radius: 1738000,
    name: "AGRI"
  };
  agriMapType = new google.maps.ImageMapType(agriTypeOptions);

  var myLatlng = new google.maps.LatLng(-33.865498, 151.214293);
  var mapOptions = {
    center: myLatlng,
    zoom: 16,
    streetViewControl: false,
    mapTypeControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["AGRI"]
    }
  };

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


  var streetMapOverlayMapType = new google.maps.StyledMapType(
    streetMapOverlayStyle, styledMapOptions);

  map.overlayMapTypes.insertAt(0, streetMapOverlayMapType);
  map.mapTypes.set('AGRI', agriMapType);
  map.setMapTypeId('AGRI');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat...