JSFiddle - React, Tailwind, and code Playground

by nraynaud

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://www.gotproject.com/blog/files/dragdrop/webkitdragdrop.js"></script>
<div id="wrapper"><div id="map"></div></div>
<div id='result'></div>

CSS

html, body {
 height: 100%;   
}
#map{
    width: 100%;
    height: 100%;
}
#wrapper {
    position: relative;
    width:100%;
    height: 100%;
}
#button.active {
    background-color: red;
    opacity: 0.30;
}
#button {
    position: absolute;
    bottom: 0;
    height: 200px;
    max-height: 25%;
    max-width: 15%;
    min-height: 32px;
    min-width: 32px;
    width: 100px;
    opacity: 0.70;
    border-radius: 15px;
    background: rgba(200,200,200,32);
    border-width: 3px;
}

#brush.active {
    opacity: 0.50;
}

#brush{
    opacity: 0.80;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />');
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -1.32910),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    mapTypeControl: false
};
map = new google.maps.Map($('#map')[0], myOptions);
var flightPlanCoordinates = [
    new google.maps.LatLng(48.24, -4.31),
    new google.maps.LatLng(47, 0)
     ];
var polyline = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
});

function CustomMarker() {
    this.set('position', new google.maps.LatLng(47, 0));
}

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.onAdd = function() {
    var div = document.createElement('DIV');
    div.id = 'brush';
    div.style.border = "none";
    div.style.borderWidth = "0px";
    div.style.position = "absolute";
    var img = document.createElement("img");
    img.src = 'http://s3-eu-west-1.amazonaws.com/woosmap/brush.png';
    img.style.width = "100px";
    img.style.height = "100px";
    div.appendChild(img);
    this.div_ = div;
    var that = this;
    $(div).bind('touchstart', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var touch = event.originalEvent.targetTouches[0];
        that.dragStart = {
            x: touch.pageX,
            y: touch.pageY
        };
        var pos = that.get('position');
        $(div).addClass('active');
        $('#button').removeClass('inactive');
        that.initialPosition = that.getProjection().fromLatLngToDivPixel(pos);

    });
    $(div).bind('touchmove', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var touch = event.originalEvent.targetTouches[0];
        var pos = new google.maps.Point(that.initialPosition.x + touch.pageX - that.dragStart.x,...