Basic Google Maps Isochrones

Display Targomo polygons on google map 
<!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>
        html, body {
            width: 100%; height: 100%; margin: 0;
            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;
        }
        #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: 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
            });
        
            // polygons time rings
            const travelTimes = [300, 600, 900, 1200, 1500, 1800];
        
            // you need to define some options for the polygon service
            const options = {
                travelType: 'bike',
                travelEdgeWeights: travelTimes,
                maxEdgeWeight: 1800,
                edgeWeight: 'time',
                serializer: 'json'
            };
        
            // define the starting point
            const sources = [{ id: 0, lat: myLatlng.lat(), lng: myLatlng.lng() }];
        
            // define the polygon overlay
            const layer = new tgm.googlemaps.TgmGoogleMapsPolygonOverlay(map, {
                strokeWidth: 20
            });
        
            // 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