JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
     <div id="wrap">
                <div id="main">
    <div id="map"></div>

    <div id="route">

        <strong>Kliknij w stolicÄ™ na mapie lub wybierz z listy!</strong>

        <p>Distance: <span id="total"></span><span id="loader" class="ico"></span></p>

        <button id="save">save</button> <button id="load">load</button> <button id="clear">clear</button>

    </div>
                </div>
            </div>

CSS

#main {
    width: 1000px;
    margin: 0 auto;
}
#map {
    width: 450px;
    height: 400px;
    float: left;
}
#route {
    width: 300px;
    float: right;
}

JavaScript

var directionsService = new google.maps.DirectionsService();
var map;
var split = true; // split to many renderers or not?
var render = {
    renders: [],
    markers: [],
    clear: function() {
        for (var i = 0; i < render.markers.length; i++) {
            render.markers[i].setMap(null);
        }
        render.markers = [];
        for (var i = 0; i < render.renders.length; i++) {
            render.renders[i].setMap(null);
        }
        render.renders = [];
    },
    add: function(directions) {
        var options = {
            directions: directions,
            draggable: true,
            map: map,
            preserveViewport: true,
            markerOptions: {
                draggable: true
            }
        };

        if (split) {
            options.markerOptions.visible = false;
        }

        var directionsRenderer = new google.maps.DirectionsRenderer(options);
        directionsRenderer.renderer = render.renders.length;

        if (split) {
            var marker = render.addMarker(directions.routes[0].legs[0].end_location);
            render.renders.push(directionsRenderer);

            $.each(['dragstart', 'drag', 'dragend'], function(index, value) {
                google.maps.event.addListener(render.markers[render.renders.length < 2 ? 0 : render.markers.length - 2], value, function(e) {
                    var m = directionsRenderer.b.markers[0];
                    m.setPosition(this.getPosition());
                    google.maps.event.trigger(m, value, e);
                });

                google.maps.event.addListener(marker, value, function(e) {
                    var l = directionsRenderer.b.markers.length - 1;
                    directionsRenderer.b.markers[l].setPosition(this.getPosition());
                    google.maps.event.trigger(directionsRenderer.b.markers[l], value, e);
                });
            });
        }

       ...