JSFiddle - React, Tailwind, and code Playground

by Bhavik Bamania

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
<body onload="init()">
        <div id="map"></div>
      </body>

CSS

html, body, #map { width:100%; height:100%; margin:0; padding:0; }

JavaScript

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);


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

          }