MapTilerLayer

Image overlay for GoogleMaps with Opacity Control

A simple library which adds easy support for Overlay to Google Maps API. It also adds a simple Opacity Control for use with Google Maps, which allows you to change the opacity of your tile overlay and simple geolocation control.

The easiest way to prepare map for Google Maps overlay is to use MapTiler.

Read more

More examples

Usage in page

 <!DOCTYPE html>
    <html>
      <head>
        <title>Campus Map</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
        <script>

          function init() {
            var opts = {
              streetViewControl: false,
              tilt: 0,
              center: new google.maps.LatLng(0, 0),
              zoom: 3
            };

            var map = new google.maps.Map(document.getElementById('map'), opts);
            var mapBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(31.433639, -100.470039),
                    new google.maps.LatLng(31.444161, -100.448983));
            var mapMinZoom = 12;
            var mapMaxZoom = 18;
            var overlay = new klokantech.MapTilerMapType(map, function (x, y, z) {
              return "https://tileserver.maptiler.com/campus/{z}/{x}/{y}.png".replace('{z}', z).replace('{x}', x).replace('{y}', y);
            },
                    mapBounds, mapMinZoom, mapMaxZoom);

            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
            var opacitycontrol = new klokantech.OpacityControl(map, overlay);

            var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);
            map.fitBounds(mapBounds);

          }
        </script>
        <style>
          html, body, #map { width:100%; height:100%; margin:0; padding:0; }
        </style>
      </head>
      <body onload="init()">
        <div id="map"></div>
      </body>
    </html>

    

Documentation

klokantech.MapTilerMapType(map, tileurl, opt_bounds, opt_minZoom, opt_maxZoom, opt_dontAdd)

Params
Methods

klokantech.OpacityControl(map, layer, opacity)

Params
Methods

klokantech.GeolocationControl(map, opt_maxZoom, opt_controlPosition);

  • map {google.maps.Map} Map object.
  • opt_zoom {number} Zoom to use when first position is obtained.
  • opt_controlPosition {google.maps.ControlPosition=}
  • ©  MapTiler. All rights reserved. Privacy & Terms.
    Follow us on
    X

    Découvrez MapTiler en français!

    Visitez maptiler.fr
    X

    Přečtěte si více v češtině

    Více na maptiler.cz
    X

    Meer in het Nederlands

    Ga naar maptiler.nl
    X

    日本語で詳細をみる

    maptiler.jp へ
    X

    Weitere Informationen finden Sie

    auf MapTiler.de
    X

    ديزملا فشتكإ

    maptiler.ae ىلإ لقتنا