JSFiddle - React, Tailwind, and code Playground

by masmiguel

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}

JavaScript

function decodificar(str,precision){
    var index = 0,
    lat = 0,
    lng = 0,
    coordinates = [],
    shift = 0,
    result = 0,
    byte = null,
    latitude_change,
    longitude_change,
    factor = Math.pow(10, precision || 5);

// Coordinates have variable length when encoded, so just keep
// track of whether we've hit the end of the string. In each
// loop iteration, a single coordinate is decoded.
while (index < str.length) {

    // Reset shift, result, and byte
    byte = null;
    shift = 0;
    result = 0;

    do {
        byte = str.charCodeAt(index++) - 63;
        result |= (byte & 0x1f) << shift;
        shift += 5;
    } while (byte >= 0x20);

    latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

    shift = result = 0;

    do {
        byte = str.charCodeAt(index++) - 63;
        result |= (byte & 0x1f) << shift;
        shift += 5;
    } while (byte >= 0x20);

    longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

    lat += latitude_change;
    lng += longitude_change;

    coordinates.push({"lat":lat / factor, "lng":lng / factor});
  //  coordinates.push([lat / factor, lng / factor]);
}
console.log(coordinates);

return coordinates;
}

function initialize() {

var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 39.571128,
lng: 2.626270
},
zoom: 14
});

var encoded_data = '{kfnjAkvg_D~Hw[nPg|@~CsXvB{m@{@oi@?_D{@we@{@kW?{Jf@cQfEgr@vBgw@nZ_XSg@g@{@cLoUcGkMoFcLsSsb@oK_S{EoKk\\_q@{E{JkMkWkCoFSg@kCcGoK_SkCoFoPw[wLkWwLcVnFc[fJsl@vB_NfJgr@zOogA_NwBkCg@RwBRsDz@wQf@gERoFbGf@v[rDrb@zEzEz@fEf@fT~CbG{@~C_Df@oFSkMwB{^z@wVRoFbBkMgJoKkH{J_SkMcB{@{Y_SkWcLg@bBoK~k@{@zOSnAg@zJg@~CSvGwBnZkCnd@SnFg@fE{@vQSrDSvB_Nv`@kHbVSz@{@fEoFfEgEfEcVz^wGrIoFjHwBz@sIvLcVf^sSnZgTv[oKnPcGrNoAvBgOzT{@nAwBfE?~CbBfE~WjHzYrIb[rIzOzErIjCv[rIja@vLb[rIv[fJzYrInd@jMzEnKnK~RrSrb@nFbLbGjMbLnUf@z@Rf@oZ~WwBfw@gEfr@g@bQ?zJz@jWz@ve@?~Cz@ni@wBzm@_DrXoPf|@_Iv[';

//  var decode =...