Google Maps Inverse Isochrones

Show isochrone polygons as exclusion area instead of colored rings 
<!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" type="text/javascript"></script>
    <style>
        body, html {
            margin: 0; width: 100%; height: 100%;
            font-family: Helvetica, Arial, Sans-Serif;
        }
        #map {
            width: 100%;
            height: calc(100% - 15px);
        }
        #attribution {
            width: 100%; height: 15px;
            background-color: #04343f;
            display: flex;
            justify-content: end;
            align-items: center;
            font-family: sans-serif;
        }
        #attribution > a {
            font-size: 9px;
            padding-right: 5px;
            color: #ffffffa8;
            text-decoration: none;
        }
    </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() {
        
            // create targomo client
            const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__');
            // Coordinates to center the map
            const myLatlng = new google.maps.LatLng(52.36, 4.88);
        
            // define the map
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 11,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROAD
            });
        
            // init the first marker
            const marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
        
            // you need to define some options for the polygon service
            const options = {
                travelType: 'bike',
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };
        
            // define the starting point
            const sources = [{ id: 0, lat: myLatlng.lat(), lng: myLatlng.lng() }];
        
            const polygonConfig = {
                strokeWidth: 30,
                inverse: true
            }
        
            // define the polygon overlay
            const layer = new tgm.googlemaps.TgmGoogleMapsPolygonOverlay(map, polygonConfig);
            // get the polygons
            const polygons = await client.polygons.fetch(sources, options);
            // calculate bounding box for polygons
            const bounds = polygons.getMaxBounds();
            // add polygons to overlay
            layer.setData(polygons);
            // zoom to the polygon bounds
            map.fitBounds(new google.maps.LatLngBounds(bounds.southWest, bounds.northEast), 0);
        }
        
        google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</body>

</html>
content_copy
Copied to clipboard