So i am trying to implement google maps in my desktop application written in java. This turned out to be a more difficult task than i imagined, especially with my lack of skills. I have never submitted a question here before but i will try to do it the way i've seen it done when researching.
This is my java class:
package GUI;
import java.net.URL;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebEvent;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class JavaFXGoogleMaps extends Application {
private Scene scene;
MyBrowser myBrowser;
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("SHEEPTRACKER3000");
primaryStage.setWidth(400);
primaryStage.setHeight(300);
myBrowser = new MyBrowser();
scene = new Scene(myBrowser, 400, 300);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
static class MyBrowser extends Region {
HBox toolbar;
static WebView webView = new WebView();
static WebEngine webEngine = webView.getEngine();
public MyBrowser() {
final URL urlGoogleMaps = getClass().getResource(
"GoogleMapsV3.html");
webEngine.load(urlGoogleMaps.toExternalForm());
webEngine.setJavaScriptEnabled(true);
getChildren().add(webView);
webEngine.setOnAlert(new EventHandler<WebEvent<String>>() {
@Override
public void handle(WebEvent<String> arg0) {
System.out.println("We are here");
webEngine
.executeScript("document.getElementById('test').innerHTML = 'the new text';");
webEngine.executeScript("document.setNewMarker()");
webEngine
.executeScript("document.setNewMarkerWithParameters(nAME-63.44-10.39)");
// webEngine.load(urlGoogleMaps.toExternalForm());
// getChildren().add(webView);
}
});
}
}
}
And here is my html document:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGiYaSPuB9Mx2t37gy9yhUR_QOUwdTWE0&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myCenter = new google.maps.LatLng(63.43,10.39)
var mapOptions = {
center: myCenter,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var tilesloaded=true;
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
if(tilesloaded ==true){
window.alert();
tilesloaded=false;
}
});
}
document.setNewMarker = function setNewMarker(){
var marker=new google.maps.Marker({
position:new google.maps.LatLng(63.43,10.39),
icon:'sheep1.png',
map:map,
});
}
document.setNewMarkerWithParameters = function setNewMarkerWithParameters(info){
var array = info.split('-');
var a = array[0], b = array[1], c = array[2];
var lat = parseFloat(b);
var longi = parseFloat(c);
var name = parseString(a);
var marker=new google.maps.Marker({
position:new google.maps.LatLng(lat,longi),
icon:'sheep1.png',
map:map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1 id="test"> Does dis work?</h1>
<div id="map_canvas" style="width:400px; height:300px"></div>
</body>
</html>
I have been at this point for a while now, and the project deadline at school is closing in. I get the error message "Can't find variable 'name'" and i don't understand what that means. To put this in context i am trying to make a function in java where i iterate over an array on the form [name-lat-long] and add markers to the map. However i can't get there as i get the error. The name variable is not used yet, as i am trying to make this part of the code working before I go further. But later I want to be able to click on the marker and find the name of the object at that location. Any feedback at all would be much appreciated.
