Does new versions of google map's javascript versions work on JavaFx-WebView

user_7378998 0
Viewed 822

I am trying to load google map on JavaFx-WebView, and it doesn't show anything except background color of html body that i have coded on html file. Also i tried some examples on Google search, all the result were older. None of it works. My Java version is "1.8.0_121"

I wrote a html file & run it. It loaded google maps successfully. Then i load the html file to webview using webEngine.load("path") method. it doesn't show anything except backgound color.

After that I tried http://rterp.github.io/GMapsFX

  • runs ClusteredMainApp.java (put my google api key)
  • consoles outputs are:
  • "hier"
  • "clustererimages/m"
  • "Hide directions called"
  • "loadMapLibrary"
  • "loadMapLibrary done"
  • "initMap"
  • "LatLong: (47.606189, -122.33584200000001)"
  • "netscape.javascript.JSException: Error: The Google Maps JavaScript API does not support this browser. (undefined,0)"

Also i couldn't find any solutions for this error

Html File

CSS:

#map_canvas { height: 100%; background-color: blue; }

javascript:

function initialize() {
                var latlng = new google.maps.LatLng(37.39822, -121.9643936);
                var myOptions = {
                    zoom: 14,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    navigationControl: false,
                    streetViewControl: false,
                    backgroundColor: "#666970"
                };

                document.geocoder = new google.maps.Geocoder();
                document.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

html:

<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
   </body>

JavaFX:

public class WebMap extends Application {
 
    @Override public void start(Stage stage) {
        // create web engine and view
        final WebView webView = new WebView();
        final WebEngine webEngine = webView.getEngine();
        webEngine.load(getClass().getResource("WebMap.html").toString());
        // create scene
        stage.setTitle("Web Map");
        Scene scene = new Scene(webView,1000,700, Color.web("#666970"));
        stage.setScene(scene);
        // show stage
        stage.show();
    }
 
    public static void main(String[] args){
        Application.launch(args);
    }
}
javafx google-maps javascript java
2 Answers
user_118364240

If you want to use GMapsFX you can download the sample code from your link.

If you look closer you will see the lib got an class GoogleMapView and this contains is own WebView

some code from GMapsFX

public class GoogleMapView extends AnchorPane {

private static final Logger LOG = LoggerFactory.getLogger(GoogleMapView.class);

protected static final String GOOGLE_MAPS_API_LINK = "https://maps.googleapis.com/maps/api/js?v=3.exp";
protected static final String GOOGLE_MAPS_API_VERSION = "3.exp";

private boolean usingCustomHtml;

protected String language;
protected final String region;
protected String key;
protected WebView webview; <-- Own WebView
protected JavaFxWebEngine webengine;
protected boolean initialized = false;
protected final CyclicBarrier barrier = new CyclicBarrier(2);
protected final List<MapComponentInitializedListener> mapInitializedListeners = new ArrayList<>();
protected final List<MapReadyListener> mapReadyListeners = new ArrayList<>();
protected GoogleMap map;
protected DirectionsPane direc;
protected boolean disableDoubleClick = false;

So if you want to use the lib you should not create your own WebView.

You could start with the Sample 

import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.javascript.event.GMapMouseEvent;
import com.lynden.gmapsfx.javascript.event.UIEventType;
import com.lynden.gmapsfx.javascript.object.GoogleMap;
import com.lynden.gmapsfx.javascript.object.LatLong;
import com.lynden.gmapsfx.javascript.object.MapOptions;
import com.lynden.gmapsfx.javascript.object.MapTypeIdEnum;
import java.net.URL;
import java.text.DecimalFormat;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.web.WebView;

public class LatLongFXMLController implements Initializable {

    @FXML
    private Label latitudeLabel;

    @FXML
    private Label longitudeLabel;

    @FXML
    private GoogleMapView googleMapView;

    private GoogleMap map;

    private DecimalFormat formatter = new DecimalFormat("###.00000");

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        googleMapView.addMapInitializedListener(() -> configureMap());
    }

    protected void configureMap() {
        MapOptions mapOptions = new MapOptions();

        mapOptions.center(new LatLong(47.6097, -122.3331))
                .mapType(MapTypeIdEnum.ROADMAP)
                .zoom(9);
        map = googleMapView.createMap(mapOptions, false);

        map.addMouseEventHandler(UIEventType.click, (GMapMouseEvent event) -> {
            LatLong latLong = event.getLatLong();
            latitudeLabel.setText(formatter.format(latLong.getLatitude()));
            longitudeLabel.setText(formatter.format(latLong.getLongitude()));
        });

    }
}
user_71269670
Related