JSFiddle - React, Tailwind, and code Playground

doing some stuff Google maps code

by Michael Dibbets

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlx5ojvfmGDycqEdER-z3aVjtVDG_j2Ok&amp;sensor=true"></script>
<input type="button" value="route" onclick="googleMap.drawRoute('route');">
<div id="directionpanel"></div>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas { width: 100%; height: 458px; margin: 0; }   input {width:400px;margin:10px;padding:5px;line-height:20px;font-size:18px;}

JavaScript

var GoogleMapsRender = function(args) {
            this.routes = {};
            this.options = {
                mapSaturation:'-100',
                mapHue:'#000000',
                markerImage:'http://exit-reizen.nl/images/needle.png',
                markerWidth:'17',
                tripColor:'rgba(255,0,0,0.5)',
                markerHeight:'38',
                markerOrientationLeft:'4',
                markerOrientationBottom:'35',
                mapCenter : new google.maps.LatLng(42.16953, -75.129335)
            }
            for(val in args) {
                if(args.hasOwnProperty(val)) {
                    this.options[val] = args[val];
                }
            }
            this.options = args;
        }
        GoogleMapsRender.prototype = {
            init : function(container) {
                this.map = new google.maps.Map(container, {
                    center: this.options.mapCenter,
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    },
                    zoom: 6
                });
                var styles = [
                    {
                        stylers: [
                            { hue: this.options.mapHue },
                            { saturation: this.options.mapSaturation }
                        ]
                    },{
                        featureType: "road",
                        elementType: "geometry",
                        stylers: [
                            { lightness: 100 },
                            { visibility: "simplified" }
                        ]
                    },{
                        featureType: "administrative.country",
                        elementType: "labels",
                        stylers: [
                            { visibility: "off" }
                        ]
                    },{
                        featureType: "administrative.province",
          ...