JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<script src="http://rc-design.at/rcdesign/js/infobubble.js"></script>
<div id="map_canvas"></div>
    <div>
        <p>Start Adresse</p>
        <input type="text" id="startLoc" />
        <input type="button" name="calculate" value="Route berrechnen" onclick="calcRoute()"/>
    </div>
<div id="directionsPanel"></div>

<!-- Den schließen Button bitte in der infobubble.js korrigieren -->

CSS

#map_canvas {
    margin: 0px auto 20px auto;
    border: 12px solid #f8f8f8;
    height: 400px;
    max-width: 100%;
    max-height: auto;
}

JavaScript

// Google Map Einbindung
// © rc design visual concepts
// www.rc-design.at

var myLatlng = new google.maps.LatLng(47.2875549, 12.5108904); // marker Position
var mapCenter = new google.maps.LatLng(47.290189317044096, 12.510890399999992); // Kartenzentrum

var directionsService = new google.maps.DirectionsService();
var    directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});

function initialize() {

    var styles = [{
        stylers: [
            { hue: "#f79fb2" },
            { saturation: 30 }
            ]
        }, {
        featureType: "road",
        elementType: "geometry",
        stylers: [
              { hue: "#fc0c00" }
              ]
        }, {
        featureType: "road",
        elementType: "labels",
        stylers: [
            { visibility: "on" }
            ]
        }
    ];
          
    var styledMap = new google.maps.StyledMapType(styles, {
        name: 'rc design Map',
        title: 'Design-Karte zeigen'
    });
    
    var mapOptions = {
        zoom : 15,
        center : mapCenter,
        mapTypeControlOptions: { /* angezeigte Darstellungsoptionen */
            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP,
                /* google.maps.MapTypeId.SATELLITE, */
                google.maps.MapTypeId.HYBRID,
                /* google.maps.MapTypeId.TERRAIN, */
                'map_style' /* Platzhalter für StyledMap */
            ]
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP /* Vorauswahl beim Laden */
    };
    
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    /*map.mapTypes.set('map_style', styledMap); // Darstellungsoptionen erweitern
    //map.setMapTypeId('map_style'); // Vorauswahl neu setzen
    // oder alternativ var styles auf Standardkarte anwenden: */
    map.setOptions({styles: styles});
    
    var image = new google.maps.MarkerImage('http://www.rc-design.at/rcdesign/images/home.png',
                /*...