Google Maps Isochrones Without Client Library

Proxying isochrones through your server? No problem! 
<!DOCTYPE html>
<html>
<head>
    <!--  Include google maps api -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=__your_google_api_key__" type="text/javascript"></script>
        <!--  Include targomo googlemaps full build -->
    <script src="https://releases.targomo.com/googlemaps/latest-full.min.js"></script>
    <style>
        body, html {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: calc(100% - 15px);
        }
        #attribution {
            width: 100%;
            height: 15px;
            font-family: sans-serif;
        }
        #attribution > a {
            float: right;
            font-size: 11px;
            line-height: 15px;
            padding: 0px 5px;
        }
    </style>
</head><body>
    <!--  where the map will live  -->
    <div id="map"></div>
    <div id="attribution"><a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">&copy; Targomo</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a></div>
    <script>
        async function initMap() {
          // Coordinates to center the map
          const myLatlng = new google.maps.LatLng(47.3715915, 8.5364151);
        
          // define the map
          const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12,
            disableDefaultUI: true,
            zoomControl: true,
            center: myLatlng,
          });
        
          var mapType = new google.maps.StyledMapType(
            [
              {
                featureType: "all",
                elementType: "all",
                clickableIcons: false,
                draggableCursor: "",
                stylers: [{ saturation: -100 }],
              },
            ],
            { name: "Grayscale" }
          );
        
          map.mapTypes.set("grayscale", mapType);
          map.setMapTypeId("grayscale");
        
          // init the first marker
          const marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
          });
        
          // define the polygon overlay
          const layer = new tgm.googlemaps.TgmGoogleMapsPolygonOverlay(map, {
            strokeWidth: 20,
          });
        
          // get polygons directly
          // define REST API config
          const config = {
            sources: [{ id: 0, lat: myLatlng.lat(), lng: myLatlng.lng(), tm: { bike: {} } }],
            edgeWeight: "time",
            polygon: {
              values: [300, 600, 900, 1200, 1500, 1800],
              serializer: "json",
            },
          };
        
          // set REST API URL
          const url = 'https://api.targomo.com/westcentraleurope/v1/polygon?key=__targomo_key_here__';
          
          // fetch the polygons
          const polygons = await fetch(url, {
            method: "POST",
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(config),
          }).then(async (data) => {
            return await data.json();
          });
        
          // add polygons to overlay
          layer.setData(polygons.data);
        }
        
        google.maps.event.addDomListener(window, "load", initMap);
        
    </script>
</body>
</html>
content_copy
Copied to clipboard