Google Maps Routing API
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;
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">© Targomo</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>© 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>Copied to clipboard
