Loading ...

Usare Google Maps in JavaFX

Usare Google Maps in JavaFX

Sto creando un piccolo programmino per la visualizzazione delle immagini con JavaFX.

Quello che volevo aggiungere era la possibilità di aprire una finestra con Google Maps centrata sulle coordinate della foto.

Senza entrare nel dettaglio di come reperire le coordinate dalle immagini (sarà argomento di un eventuale altro articolo), vediamo come integrare Google Maps in JavaFX.

In effetti è stato abbastanza semplice usando GMapsFX!

Se usate Maven:

        <!-- https://mvnrepository.com/artifact/com.lynden/GMapsFX -->
        <dependency>
            <groupId>com.lynden</groupId>
            <artifactId>GMapsFX</artifactId>
            <version>2.12.0</version>
        </dependency>

Questo è il layout FXML che sto usando io:

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

<?import javafx.scene.layout.AnchorPane?>
<?import com.lynden.gmapsfx.GoogleMapView?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="mapPane" fx:controller="com.mp.photogallery.MapsController"
            prefHeight="616.0"
            prefWidth="737.0"
            xmlns="http://javafx.com/javafx/8"
            xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <GoogleMapView fx:id="mapView" prefHeight="750.0"
			prefWidth="761.0" AnchorPane.bottomAnchor="-185.0"
            AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="-441.0" 
			AnchorPane.topAnchor="0.0"/>
        <VBox alignment="TOP_CENTER" fillWidth="false" 
			layoutX="26.0" layoutY="29.0" prefHeight="478.0"
            prefWidth="221.0" spacing="10.0" styleClass="panel-background"
            AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="26.0" 
			AnchorPane.topAnchor="88.0">
        </VBox>
    </children>
</AnchorPane>

Questo invece il controller:

import com.lynden.gmapsfx.GoogleMapView;
import com.lynden.gmapsfx.MapComponentInitializedListener;
import com.lynden.gmapsfx.javascript.object.*;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;

import java.net.URL;
import java.util.ResourceBundle;

public class MapsController implements Initializable, MapComponentInitializedListener {

    private GoogleMap map;
    private double lat;
    private double lon;

    @FXML
    private GoogleMapView mapView;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        mapView.addMapInializedListener(this);
    }

    @Override
    public void mapInitialized() {
        LatLong latLong = new LatLong(41.9102415, 12.3959136);
        MapOptions mapOptions = new MapOptions();
        mapOptions.center(latLong)
                .overviewMapControl(false)
                .panControl(false)
                .rotateControl(false)
                .scaleControl(false)
                .streetViewControl(false)
                .zoomControl(false)
                .zoom(12);

        map = mapView.createMap(mapOptions);
        MarkerOptions markerOptions = new MarkerOptions();
        markerOptions.position(latLong);
        Marker marker = new Marker(markerOptions);
        map.addMarker(marker);

        InfoWindowOptions infoWindowOptions = new InfoWindowOptions();
        infoWindowOptions.content("<h2>ROMA</h2>Location di Roma<br>");
        InfoWindow infoWindow = new InfoWindow(infoWindowOptions);
        infoWindow.open(map, marker);
    }
}

Se avete già usato Google Maps in altri linguaggi, vi accorgerete che le opzioni sono le stesse; cambia solo la sintassi del linguaggio.

Abbiamo anche impostato del codice HTML nel marker, giusto per vedere una cosa in più!

Non so, invece, quanto si può personalizzare nel layout; non ho ancora fatto test.

Comunque è tutto abbastanza semplice.