example source code for cleverroute map now reads yaml with coworking spaces and adds markers of it to the map

examples/cleverroute.html

@@ -30,12 +30,48 @@
         white-space: nowrap;
       }
     </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js"></script>
-    <script src="../dist/index.dev.js"></script>
+    <script src="https://gitea.cleverroute.net/hussam/map-for-cleverroute/raw/branch/main/dist/index.dev.js"></script>
+
+    <!-- <script src="../dist/index.dev.js"></script> -->
     <script>
       var marker;
-      function initMap() {
-        var latLng = new google.maps.LatLng(48.7758,9.1829);
+
+      // var request = new XMLHttpRequest();
+      // request.open('GET', './Mouse-Over Yaml.yaml', true);
+      // request.responseType = 'blob';
+      // request.onload = function() {
+      //     var reader = new FileReader();
+      //     reader.readAsDataURL(request.response);
+      //     reader.onload =  function(e){
+      //         console.log('DataURL:', e.target.result);
+      //     };
+      // };
+      // request.send();
+
+      //     const text = `
+      // # Employee records
+      // - martin:
+      //     name: Martin D'vloper
+      //     job: Developer
+      //     skills:
+      //       - python
+      //       - perl
+      //       - pascal
+      // - tabitha:
+      //     name: Tabitha Bitumen
+      //     job: Developer
+      //     skills:
+      //       - lisp
+      //       - fortran
+      //       - erlang
+      // `;
+
+      // const yaml = jsyaml.load(text);
+      // console.log(yaml);
+      async function initMap() {
+        var latLng = new google.maps.LatLng(48.7758, 9.1829);
         var homeLatLng = new google.maps.LatLng(48.7758, 9.1829);
 
         var map = new google.maps.Map(document.getElementById("map_canvas"), {
@@ -43,9 +79,18 @@
           center: latLng,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
         });
+        let myData;
 
+        async function getData() {
+          fetch("./Mouse-Over Yaml.yaml")
+            .then((response) => response.text())
+            .then((yamlString) => jsyaml.load(yamlString))
+            .then((data) => {
+              console.log("data=", data);
+              myData = data;
+              myData.destinations.forEach((d) => {
                 marker = new markerWithLabel.MarkerWithLabel({
-          position: homeLatLng,
+                  position: new google.maps.LatLng(d.lonLat[1], d.lonLat[0]),
                   map: map,
                   draggable: true,
                   raiseOnDrag: true,
@@ -56,13 +101,29 @@
                 });
 
                 var iw = new google.maps.InfoWindow({
-          content: "<b>BRIK Coworking</b><br> \
-        <a href=\"https://soeren.cleverroute.net/?origin=Jesberg%2C%20Hessen&arrival=2022-04-29T10%3A00%3A00.000Z&destination=Stuttgart%2C%20Baden-W%C3%BCrttemberg\"> Fahrt finden mit cleverroute</a>",
+                  content:
+                    '<b>'+d.name+'</b><br> \
+        <a href="https://soeren.cleverroute.net/?origin=Jesberg%2C%20Hessen&arrival=2022-04-29T10%3A00%3A00.000Z&destination=Stuttgart%2C%20Baden-W%C3%BCrttemberg"> Fahrt finden mit cleverroute</a>',
                 });
                 google.maps.event.addListener(marker, "click", function (e) {
                   // window.parent.location.href = "https://bob.cleverroute.net"//`../?${toQueryString(p)}`;
                   iw.open(map, this);
                 });
+              });
+            });
+        }
+        await getData();
+
+        // marker = new markerWithLabel.MarkerWithLabel({
+        //   position: homeLatLng,
+        //   map: map,
+        //   draggable: true,
+        //   raiseOnDrag: true,
+        //   labelContent: "A",
+        //   labelAnchor: new google.maps.Point(-6, -35),
+        //   labelClass: "labels", // the CSS class for the label
+        //   labelInBackground: false,
+        // });
       }
       function log(h) {
         document.getElementById("log").innerHTML += h + "<br />";
@@ -70,9 +131,7 @@
     </script>
   </head>
   <body onload="initMap()">
-    <p>
-     
-    </p>
+    <p></p>
     <div id="map_canvas" style="height: 400px; width: 100%"></div>
     <div id="log"></div>
   </body>