[FIXED] How do I initialize Google Maps API key when using GMapsFX and FXML?

Issue

Im trying to set up a JavaFX project where I use GMapsFX. I have already gotten it to work without using FXML where I just initialized the GoogleMapView variable in the start() method. Therefore I also assume my API key is not the problem. However, when using FXML I'm not really sure where to initialize it. All I get is either: "For developer use only" or a blank page. Is it possible that the reason could be that the FXML loads before the initialize() method in an FXML-controller?

Here is my controller:

public class MapSceneController implements Initializable, MapComponentInitializedListener {

    //I have tried to initialize it here
    @FXML
    private GoogleMapView mapView = new GoogleMapView(Locale.getDefault().getLanguage(), "AIzaSyAaCPNXgEw5zlJTHLr0MYOmvxOcQ50vLdw");

    @FXML
    private TextField addressTextField;

    private GoogleMap map;

    private GeocodingService geocodingService;

    private StringProperty address = new SimpleStringProperty();

    @Override
    public void mapInitialized() {
        //And here
        //mapView = new GoogleMapView(Locale.getDefault().getLanguage(), "AIzaSyAaCPNXgEw5zlJTHLr0MYOmvxOcQ50vLdw");
        geocodingService = new GeocodingService();
        MapOptions mapOptions = new MapOptions();

        mapOptions.center(new LatLong(47.6097, -122.3331))
                .mapType(MapTypeIdEnum.ROADMAP)
                .overviewMapControl(false)
                .panControl(false)
                .rotateControl(false)
                .scaleControl(false)
                .streetViewControl(false)
                .zoomControl(false)
                .zoom(12);

        map = mapView.createMap(mapOptions);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        //And here
        //mapView = new GoogleMapView(Locale.getDefault().getLanguage(), "AIzaSyAaCPNXgEw5zlJTHLr0MYOmvxOcQ50vLdw");
        mapView.addMapInitializedListener(this);
        address.bind(addressTextField.textProperty());
    }

    @FXML
    public void addressTextFieldAction(ActionEvent event) {
        geocodingService.geocode(address.get(), (GeocodingResult[] results, GeocoderStatus status) -> {

            LatLong latLong = null;

            if( status == GeocoderStatus.ZERO_RESULTS) {
                Alert alert = new Alert(Alert.AlertType.ERROR, "No matching address found");
                alert.show();
                return;
            } else if( results.length > 1 ) {
                Alert alert = new Alert(Alert.AlertType.WARNING, "Multiple results found, showing the first one.");
                alert.show();
                latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
            } else {
                latLong = new LatLong(results[0].getGeometry().getLocation().getLatitude(), results[0].getGeometry().getLocation().getLongitude());
            }

            map.setCenter(latLong);

        });
    }
}

And here is my FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

    <?import com.lynden.gmapsfx.GoogleMapView?>
    <AnchorPane id="AnchorPane" prefHeight="600" prefWidth="1066" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.65" fx:controller="sample.JavaFX.MapScene.MapSceneController">
        <children>
            <GoogleMapView fx:id="mapView" prefHeight="600.0" prefWidth="1066.0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0.0"/>
            <TextField fx:id="addressTextField" onAction="#addressTextFieldAction" prefHeight="27.0" prefWidth="274.0" promptText="Address" AnchorPane.leftAnchor="10" AnchorPane.topAnchor="10" />
        </children>
    </AnchorPane>

Thanks in advance! :)

Solution

There are several issues in your code. I don't know the API of GMapsFX but if the constructor GoogleMapView is the only way to set the key, then I would propose the following. In your FXML file only define the container into which you want to place your map view. Then in the initialize method (which is called automatically after the instantiation of the FXML part) create the map view manually and add it to the container. Remove all other initializations because they won't work.

Answered By - mipa