Google Maps Inverse Polygons
Show 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%;
        }

        #map {
            width: 100%;
            height: calc(100% - 15px);
        }

        #attribution {
            width: 100%;
            height: 15px;
        }

        #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.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a> <a href='https://targomo.com/developers/resources/attribution/' target='_blank'>&copy; Targomo</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