JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<body onload="initializeMap()">


 <div id="locationField">
  <input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addressone">
  <input type="text" id="street_number" name="street_number" />
  <input type="text" id="route" name="street_name" />
  <input type="text" id="locality" name="town_city" />
  <input type="text" id="administrative_area_level_1" name="administrative_area_level_1" />
  <input type="text" id="postal_code" name="postcode" />
  <input type="text" id="country" name="country" />
  <input type="text" id="longitude" name="longitude" />
  <input type="text" id="latitude" name="latitude" />

</div>
<div id="locationField2">
  <input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text" />
</div>
<div id="addresstwo">
  <input type="text" id="street_number2" name="street_number2" />
  <input type="text" id="route2" name="street_name2" />
  <input type="text" id="locality2" name="town_city2" />
  <input type="text" id="administrative_area_level_12" name="administrative_area_level_12" />
  <input type="text" id="postal_code2" name="postcode2" />
  <input type="text" id="country2" name="country2" />
  <input type="text" id="longitude2" name="longitude2" />
  <input type="text" id="latitude2" name="latitude2" />
</div>


  <div id="mode-selector" class="controls"> <input type="radio" name="type" id="changemode-walking" checked="checked"> <label for="changemode-walking">Walking</label> <input type="radio" name="type" id="changemode-transit"> <label for="changemode-transit">Transit</label> <input type="radio" name="type" id="changemode-driving"> <label for="changemode-driving">Driving</label> </div>
 
<div id="map_canvas"></div> 


</body>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

#map_canvas
{
  width:100%;
  height:400px !important;
  
}

JavaScript

function initializeMap() {
    var styles = {
        'monTheme': [
        {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{'visibility': 'simplified'}]
        }, {
            featureType: 'road.arterial',
            stylers: [
                {hue: 149},
                {saturation: -78},
                {lightness: 0}
            ]
        }, {
            featureType: 'road.highway',
            stylers: [
                {hue: -31},
                {saturation: -40},
                {lightness: 2.8}
            ]
        }, {
            featureType: 'poi',
            elementType: 'label',
            stylers: [{'visibility': 'off'}]
        }, {
            featureType: 'landscape',
            stylers: [
                {hue: 163},
                {saturation: -26},
                {lightness: -1.1}
            ]
        }, {
            featureType: 'transit',
            stylers: [{'visibility': 'off'}]
        }, {
            featureType: 'water',
            stylers: [
                {hue: 3},
                {saturation: -24.24},
                {lightness: -38.57}
            ]
        }
    ]};

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        mapTypeId: 'monTheme'
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
    map.mapTypes.set('monTheme', styledMapType);
	
	var villeDepartLatitude= 48.8750872;
	var villeDepartLongitude=2.3180317;

    var myLatLng = new google.maps.LatLng(villeDepartLatitude,villeDepartLongitude);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: 'db.png'
        //title: 'Strasbourg'
    });
	
	var villeArriveeLatitude=47.3178607;
	var...