JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(34, 108),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
var gpxStr = '<gpx><trk><trkseg><trkpt lat="50.834048" lon="-0.127354"> <ele>31.0</ele><Score>-0.64730385</Score><time>2016-07-07T14:31:51Z</time></trkpt><trkpt lat="50.833833" lon="-0.127600"> <ele>31.0</ele><Score>-0.647203</Score><time>2016-07-07T14:32:09Z</time></trkpt><trkpt lat="50.833715" lon="-0.127768"> <ele>31.0</ele><Score>0.647203</Score><time>2016-07-07T14:32:50Z</time></trkpt><trkpt lat="50.833171" lon="-0.128468"> <ele>31.0</ele><Score>0.99609375</Score><time>2016-07-07T14:32:50Z</time></trkpt><trkpt lat="50.832951" lon="-0.128771"> <ele>31.0</ele><Score>-0.5</Score><time>2016-07-07T14:32:50Z</time></trkpt></trkseg></trk></gpx>';

  var xml = parseXml(gpxStr);
  var trkpts = xml.getElementsByTagName("trkpt");
  var bounds = new google.maps.LatLngBounds();
  for (var i=0;i<(trkpts.length-1);i++) {
    var coord1 = new google.maps.LatLng(parseFloat(trkpts[i].getAttribute("lat")),
    parseFloat(trkpts[i].getAttribute("lon")));
    bounds.extend(coord1);
    var coord2 = new google.maps.LatLng(parseFloat(trkpts[i+1].getAttribute("lat")),
    parseFloat(trkpts[i+1].getAttribute("lon")));
    bounds.extend(coord2);

var score = parseFloat(nodeValue(trkpts[i].getElementsByTagName("Score")[0]));
alert(score);
    var polyline = new google.maps.Polyline({
     map: map,
     path: [coord1, coord2],
     strokeColor: rgb(-1,1,score),
     strokeWeight: 4,
     strokeOpacity: 1.0
    })
    
  }
  map.fitBounds(bounds);
}
function color(score) {
   var maxValue = 0xFFFFFF; // red
   var value = (score+1)*maxValue/2;

   // var hexString = value.toString(16);
   // var hexString = (value+0x10000).toString(16).substr(-4).toUpperCase();
   if (value < 0)
    {
    	value = 0xFFFFFFFF + value +...