I have been trying to display a marker on the map when I click on a Button of my JavaFX application. So what happens is when I click on that button, I write the position in a JSON file, this file will be loaded in the html file that contains the map. The problem is that it works perfectly when I open the html page in the browser, but nothing happens in the JavaFX&#39;s web view, and I don&#39;t know why !

This is the html file:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Simple Map&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot;&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;style&gt;
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      /*#map {
        height: 100%;
      }*/
      #map{width:100%;height:100%;margin:auto;}
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
    &lt;script&gt;
      var map;
      var marker;
      // Multiple Markers
      var markers = [];
      var pos = {lat: 46.662388, lng: 0.3599617};
      var itinerary_markers = [];
      
      function initMap() {

        var currentLat, currentLng;//Latitude et longtitude courante

        $.ajax({
          url: &#39;https://maps.googleapis.com/maps/api/geocode/json?address=My+ADDRESS&amp;key=MY_KEY&#39;,
          async: false,
          dataType: &#39;json&#39;,
          success: function (data) {
            currentLat = data.results[0].geometry.location.lat;
            currentLng = data.results[0].geometry.location.lng;
          }
        });

        map = new google.maps.Map(document.getElementById(&#39;map&#39;), {
          center: {lat: currentLat, lng: currentLng},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        /*MARQUEUR*/ 
        $.ajax({
            async: false,
            url: &#39;test.json&#39;,
            data: &quot;&quot;,
            accepts:&#39;application/json&#39;,
            dataType: &#39;json&#39;,
            success: function (data) {
                for (var i = 0; i &lt; data.hydrants.length; i++) {
                    markers.push( data.hydrants[i]);
                }
            }
        });

          var posi = new google.maps.LatLng(markers[0].Lat, markers[0].Lng);
          marker = new google.maps.Marker({
              position: posi,
              map: map,
              //title: markers[i][0]
              title: markers[0].Name
            });
            
      }
    &lt;/script&gt;
    
    &lt;script
        src=&quot;https://code.jquery.com/jquery-3.2.1.min.js&quot;
        integrity=&quot;sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=&quot;
        crossorigin=&quot;anonymous&quot;&gt;
    &lt;/script&gt;


    &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=MY_KEY&amp;callback=initMap&amp;language=fr&quot;
    async defer&gt;&lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;

When I click the button, I fill the JSON file (which works perfectly) and then I execute this to refresh the webview:

    this.webView.getEngine().load(getClass().getResource(&quot;/data/index.html&quot;).toString());

As I said before, when I open the file on the browser I see the expected result, but I don&#39;t know what is the problem with the JavaFX.
If there is a better way to do this please tell me.

**EDIT:**

I found a solution to the problem by sending directly the data (the GPS coordinates) from JavaFX to Javascript using the executeScript() method, so I don&#39;t need a json file as bridge between the two platforms.
So this is an example of how the code looks like:

    eng.executeScript(&quot;updateMarker(&quot; + lat + &quot;, &quot; + lng + &quot;)&quot;);//eng is a WebEngine instance

And here is the Javascript:

    /*The initial latitude and longtitude*/
    var currentLat = the latitude;
    var currentLng = the longtitude;

    function initMap() {

        map = new google.maps.Map(document.getElementById(&#39;map&#39;), {
          center: {lat: currentLat, lng: currentLng},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var posi = new google.maps.LatLng(currentLat, currentLng);
        marker = new google.maps.Marker({
            position: posi,
            map: map,
            visible: false
        });
      }

    /*The method that is I call from JavaFX*/
    function updateMarker(_lat, _lng){
        marker.setPosition({lat: _lat, lng: _lng});
        map.setCenter(new google.maps.LatLng(_lat, _lng));
        marker.setVisible(true);
      }

Thank you for your comments and answers, and a special shootout to reddit.

All Javafx Webengine Solutions on Gang of Coders

Total of 1 Javafx Webengine Solutions

Google Maps & JavaFX: Display marker on the map after clicking JavaFX button