JSFiddle - React, Tailwind, and code Playground
by sapioit
HTML
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var home = new google.maps.LatLng(45.666396, 25.611569);
var mapOptions = {
zoom: 14,
center: home
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = new google.maps.LatLng(45.67573, 25.647464);
var end = new google.maps.LatLng(45.645775, 25.588295);
var waypts = [];
waypts.push({
location:new google.maps.LatLng(45.671123, 25.640974),
stopover:true});
waypts.push({
location:new google.maps.LatLng(45.669687, 25.638461),
stopover:true});
waypts.push({
location:new google.maps.LatLng(45.663297, 25.629714),
stopover:true});
waypts.push({
location:new google.maps.LatLng(45.657968,...