JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://km.aifb.kit.edu/sites/spark/src/jquery.spark.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://liris.cnrs.fr/~pchampin/spark/spark.gmapv3.js"></script>
   <div class="container">
      <div class="span-24 last prepend-top">
        <h1>Spark map example</h1>
        <p>
          The following map is a spark showing the result of a
          query to <a href="http://dbpedia.org/">DBpedia</a>,
          asking for the coordinates of the european capital cities.

          <div class="spark" id="map_canvas" style="height: 400px"
            data-spark-endpoint="http://dbpedia.org/sparql"
            data-spark-format="spark.gmapv3.js"
            data-spark-param-zoom="4"
            data-spark-param-center="Vienna, Austria"
            data-spark-query='
                SELECT ?name ?long ?lat
                WHERE {
                  ?c a          yago:CapitalsInEurope ;
                     rdfs:label ?name ;
                     geo:long   ?long ;
                     geo:lat    ?lat .
                     FILTER( lang(?name)="en" )
                }
            '
            data-spark-param-latitude="lat"
            data-spark-param-longitude="long"
            data-spark-param-label="name"
          >

            <em>loading&hellip;</em>
          </div><br />

          <div class="spark"
            data-spark-endpoint="http://dbpedia.org/sparql"
            data-spark-format="http://km.aifb.kit.edu/sites/spark/src/jquery.spark.simpletable.js"
            data-spark-query='
                SELECT ?name ?long ?lat
                WHERE {
                  ?c a          yago:CapitalsInEurope ;
                     rdfs:label ?name ;
                     geo:long   ?long ;
                     geo:lat    ?lat .
                     FILTER( lang(?name)="en" )
                }
              '
...

JavaScript

(function($){

    $.spark.format.gmapv3 = function(element, result, reduced, params) {
        
        // force element height of at least 100 pixels
        if (element.height() < 100) {
            element.height(100);
        }
        
        // create map widget and center it
        var map = new google.maps.Map(element.get(0), {
                zoom: 0,
                center: (new google.maps.LatLng(0,0)),                
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        var zoomLevel = parseInt(params.param.zoom) || 7;
        var centerName = params.param.center || "Lyon, France";
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: centerName },
                         function (results, status) {
                             if (status == google.maps.GeocoderStatus.OK) {
                                 var position = results[0].geometry.location;
                                 map.setCenter(position);
                                 map.setZoom(zoomLevel);
                             } else {
                                 alert("geocoder status: " + status);
                             }

                         });

         // add marker for every entry
        var latKey = params.param.latitude || "latitude";
        var lonKey = params.param.longitude || "longitude";
        var labelKey = params.param.label || "label";
        $.each(result.results.bindings, function(item, values) {
                var latitude = parseFloat(values[latKey].value);
                var longitude = parseFloat(values[lonKey].value);
                var label = values[labelKey].value;
                var position = new google.maps.LatLng(latitude, longitude);
                var marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: label
                    });
                var listener =...