Show speedcam positions on Google Map

Copy and paste data from speedcam file and press "Show All Markers" or other options below

by rity

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="floating-panel">
    <div>
        <button id="toogleButton" style="width: 100%;">Show/Hide Options</button>
    </div>
    <div id="content2Toogle">
        <div>
            <div>
                <input id="hideMarkers" type=button value="Hide Markers" style="width: 33%;">
                <input id="showMarkers" type=button value="Show Markers" style="width: 32%;">
                <input id="deleteMarkers" type=button value="Delete Markers" style="width: 33%;">
            </div>
            <div>
                <input id="showMyMarkers" type=button value="Show All Markers" style="width: 100%;">
            </div>
            <input id="showFSC" type=button value="fixed speed camera" style="width: 31%;">
            <input id="showCRLSC" type=button value="combined red light and speed cameras" style="width: 68%;">
            <input id="showFRLC" type=button value="fixed red light camera" style="width: 49%;">
            <input id="showSCP" type=button value="section camera positions" style="width: 50%;">
            <input id="showLRM" type=button value="lasers, hand-held radars and other mobile speed camera locations" style="width: 100%;">
            <input id="showRC" type=button value="railway crossing" style="width: 49%;">
            <input id="showNCML" type=button value="not constant mobile locations" style="width: 50%;">
        </div>
        <div>
            <div>
                Paste data from speedcam file:
            </div>
            <textarea id="poi" rows="10" style="width: 98%;"></textarea>
        </div>
    </div>
</div>
<div id="map"></div>

CSS

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
  min-height: 100%; /* min. height for modern browser */
  height:auto !important; /* important rule for modern Browser */
  height:100%; /* min. height for IE */
  overflow: hidden !important; /* FF scroll-bar */
}
#floating-panel {
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
  width: 450px;
}

JavaScript

/*
 * declare map as a global variable
 */
var map;
var markers = [];
var titles = ['F', 'CRL', 'FRL', 'SC', 'L', 'R', 'N'];
var colors = ['c90000', 'f000c6', '6000f0', '00d1f0', '00f011', '00f011', 'f07100'];

$(document).ready(function(){
  $("#toogleButton").click(function(){
    $("#content2Toogle").toggle(1000);
  });
});

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  $('#hideMarkers').click(function() { clearMarkers(); });
  $('#showMarkers').click(function() { showMarkers(); });
  $('#showMyMarkers').click(function() { showMyMarkers(); });
  $('#deleteMarkers').click(function() { deleteMarkers(); });
  $('#showFSC').click(function() { showFC(1); });
  $('#showCRLSC').click(function() { showFC(2); });
  $('#showFRLC').click(function() { showFC(3); });
  $('#showSCP').click(function() { showFC(4); });
  $('#showLRM').click(function() { showFC(5); });
  $('#showRC').click(function() { showFC(6); });
  $('#showNCML').click(function() { showFC(7); });

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(46, 17),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  /*
   * create infowindow (which will be used by markers)
   */
  var infoWindow = new google.maps.InfoWindow();

  /*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "click", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
    }
    markers.push(marker);
    return marker;
  }

  /*
   * add markers to map
   */
  /*
  var marker0 = createMarker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon:...