JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

CSS

div#map {
    height: 600px;
}

JavaScript

var $canvas = document.querySelector('#map');

var map = new google.maps.Map($canvas, {
    center: new google.maps.LatLng(52.46004869999999, 13.37898690),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 14
});

var routes = [
    { 
        origin: new google.maps.LatLng(52.459281, 13.356367),
        destination: new google.maps.LatLng(52.455833, 13.322948),
        travelMode: google.maps.TravelMode.BICYCLING
    },
    {
        origin: new google.maps.LatLng(52.597621, 13.430536),
        destination: new google.maps.LatLng(52.5918799, 13.2832929),
        travelMode: google.maps.TravelMode.BICYCLING
    }
];

routes.forEach(function(route) {
    new google.maps.DirectionsService().route(route, function(body) {
        var display = new google.maps.DirectionsRenderer();

        display.setMap(map);
        display.setDirections(body);
    });
});