Google Maps Routing Service
Plot routing results in Google Maps
<!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%;
            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://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>
        // create targomo client
        const client = new tgm.TargomoClient('northamerica', '__targomo_key_here__');
        // Define source and target locations which are passed into the Targomo route service.
        let target = [45.522062, -122.690559];
        let source = [45.500555, -122.653342];
        
        // define the map
        const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12, disableDefaultUI: true, zoomControl: true,
            center: { lat: (source[0].lat + source[1].lat) / 2, lng: (target[0].lng + target[1].lng) / 2 },
        });
        
        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');
        
        const MAP_PATH = 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z';
        
        // init the source marker
        const sourceMarker = new google.maps.Marker({
            position: new google.maps.LatLng(source[0], source[1]),
            map: map,
            icon: {
                path: MAP_PATH, scale: 1.4, fillOpacity: 1,
                fillColor: '#093c47', strokeOpacity: 0,
                anchor: { x: 12, y: 24 },
            }
        });
        
        // init the target marker
        const targetMarker = new google.maps.Marker({
            position: new google.maps.LatLng(target[0], target[1]),
            map: map,
            icon: {
                path: MAP_PATH, scale: 1.4, fillOpacity: 1,
                fillColor: '#ff8319', strokeOpacity: 0,
                anchor: { x: 12, y: 24 },
            }
        });
        
        // The travel options used to determine which routes should be searched for
        const options = {
            travelType: 'transit',
            maxEdgeWeight: 3600,
            edgeWeight: 'time',
            pathSerializer: 'compact',
            transitFrameDate: 20190219,
            transitFrameTime: 36000,
            transitFrameDuration: 3600,
            transitMaxTransfers: 5
        };
        
        // Requesting routs from the Targomo API.
        function refreshRoutes() {
            const s = { ...sourceMarker.getPosition().toJSON(), ...{ id: 's' } };
            const t = { ...targetMarker.getPosition().toJSON(), ...{ id: 't' } };
            client.routes.fetch([s], [t], options).then(result => {
                result.forEach((route) => {
                    route.routeSegments.forEach(segment => {
                        if (segment.type === "WALK") {
                            const routePath = new google.maps.Polyline({
                                path: segment.points,
                                geodesic: true,
                                strokeOpacity: 0,
                                icons: [{
                                    icon: {
                                        path: 'M 0,-1 0,1',
                                        strokeOpacity: 1,
                                        strokeColor: '#FF0000',
                                        scale: 2
                                    },
                                    offset: '0',
                                    repeat: '10px'
                                }],
                                map: map
                            });
                        } else if (segment.type === "TRANSIT") {
                            const routePath = new google.maps.Polyline({
                                path: segment.points,
                                geodesic: true,
                                strokeColor: '#0000FF',
                                strokeOpacity: 1.0,
                                strokeWeight: 3,
                                map: map
                            });
                        } else if (segment.type === "TRANSFER") {
                            for (let transfer of segment.points) {
                                const transferCircle = new google.maps.Marker({
                                    map: map,
                                    position: transfer,
                                    icon: {
                                        path: google.maps.SymbolPath.CIRCLE,
                                        scale: 3,
                                        strokeColor: '#00FF00'
                                    }
                                });
                            }
                        }
                    })
                });
            });
        
            let bounds = new google.maps.LatLngBounds();
            bounds.extend(sourceMarker.getPosition());
            bounds.extend(targetMarker.getPosition());
        
            map.fitBounds(bounds);
        }
        
        refreshRoutes();
    </script></body>
</html>
content_copy
Copied to clipboard