JavaFX with google map and JSON sample

Thanks to this web siteAdding HTML Content to JavaFX Applications | JavaFX 2 Tutorials and Documentation, it it easy making upcalls from JavaScript to JavaFX.
1.Adding lines to HTML's table and creating Marker on this map, by clicking on the map.
2.Saving point's information as json file.(Javascript calls JavaFX method)
3.Drawing Polyline and adding lines to HTML's table by reading json file.(JavaFX calls JavaScript method)

• Figure 1(After clicking on the map, you can see Marker as well as latlng information.)

(The color picker on the WebView does not work? Why does Marker have black background color?)

• Figure 2(When you click the 'save to json' button, this dialog shows up.)

• Figure 3(When you click the 'load json to map' button, this dialog shows up.)

• Figure 4(After loading json file by JavaFX, drawing Polyline on the map and adding information to HTML's table.)

JavaScript calls JavaFX getInfoList method(save to json button event)

• MapPositionSample.java

        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        URL url = getClass().getResource("sample.html");
        engine.load(url.toExternalForm());
        JSObject win = (JSObject) engine.executeScript("window");
        win.setMember("app", new JavaApp(stage)); // *** for javascript 
...
    public class JavaApp {
        private Stage stage;
        public JavaApp(Stage stage) {
            this.stage = stage;
        }
        /**
         * called from JavaScript by clicking [save to Json] button
         * @param infos 
         */
        public void getInfoList(String infos) {
            FileChooser fileChooser = new FileChooser();
            File file = fileChooser.showSaveDialog(this.stage);
            try (BufferedWriter writer = new BufferedWriter(new FileWriter(file))) {
                writer.write(infos);
            } catch (IOException ex) {
                Logger.getLogger(MapPositionSample.class.getName()).log(Level.SEVERE, null, ex);
            }
        }
    }

• sample.js

function saveJson(){
    // remove deleted info
    var newList = [];
    pointsInfo.infoList.forEach(function(info){
        if (!info.isDeleted){
            delete info.latlng;
            newList.push(info);
        }
    });
    // call java method
    var infos = JSON.stringify(newList);
    app.getInfoList(infos); // *** call Java method
}

JavaFX calls JavaScript drawPolylineFromJson method(load json to map button event)

• MapPositionSample.java

        loadBtn.setOnAction(e -> {
            FileChooser fileChooser = new FileChooser();
            File file = fileChooser.showOpenDialog(stage);
            try (BufferedReader reader = new BufferedReader(new FileReader(file))){
                // file to json
                Object obj = JSONValue.parse(reader);
                // call JacaScript method with JSON object
                engine.executeScript("drawPolylineFromJson(" + obj + ")"); // *** call java script
            } catch (Exception ex) {
                Logger.getLogger(MapPositionSample.class.getName()).log(Level.SEVERE, null, ex);
            }
        });

• sample.js

function drawPolylineFromJson(pointsListJson){
    // clear map & table
    pointsInfo.pointNo = -1; // reset no
    pointsInfo.deleteAllMarkers(); // remove all markers from map
    initPolyLine.setMap(null); // remove KIX - SFO Polyline
    var tbody = $('#points');
    tbody.children().remove();
    var kixLatLng = infos[0];
    var sfoLatLng = infos[1];
    var prevPath = new google.maps.LatLng(kixLatLng.lat, kixLatLng.lng);
    pointsListJson.forEach(function(info){
        pointsInfo.addPoint(info);
        // add point to table 
        addTr(pointsInfo.getPoint());
        // create polyline
        var thisPath = new google.maps.LatLng(info.lat, info.lng);
        var polylineOpt = {
           map: map,
           path: [prevPath, thisPath],
           strokeColor: info.color
       };
       new google.maps.Polyline(polylineOpt);    
       prevPath = thisPath;
    });
    // last place - SFO
    var sfoPath = new google.maps.LatLng(sfoLatLng.lat, sfoLatLng.lng);
    var polylineOpt = {
       map: map,
       path: [prevPath, sfoPath],
       strokeColor: '#000000'
    };
    new google.maps.Polyline(polylineOpt);    
}

This is very hard for me to explain how to implement this kind of code...^^;;
The Whole code is here.tomoTaka01/MapPositonSample - JavaScript - GitHub
keep coding...