Wednesday, March 28, 2012

Embed Google Maps in JavaFX WebView

The Google Maps Javascript API lets you embed Google Maps in your own web pages. With WebView in JavaFX 2.0, you can easy embed Google Maps in your Java application.

Embed Google Maps in JavaFX WebView

Create a googlemaps.html to embed Google Maps in web page.
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>

<script>
var map;
function loadmap(){

  var options = {
      zoom: 16,
      center: new google.maps.LatLng(51.507222, -0.1275),
      mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("mapcanvas"), options);
}

</script>

</head>
<body onload="loadmap()">
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas"></div>
</body>
</html>


Embed googlemaps.html in WebView in your Java application.
package javafx_googlemaps;

import java.net.URL;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebEvent;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_GoogleMaps extends Application {

  private Scene scene;
  MyBrowser myBrowser;

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
      launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
      primaryStage.setTitle("java-buddy.blogspot.com");
    
      myBrowser = new MyBrowser();
      scene = new Scene(myBrowser, 640, 480);
    
      primaryStage.setScene(scene);
      primaryStage.show();
  }

  class MyBrowser extends Region{
    
      HBox toolbar;
    
      WebView webView = new WebView();
      WebEngine webEngine = webView.getEngine();
    
      public MyBrowser(){
        
          final URL urlGoogleMaps = getClass().getResource("googlemaps.html");
          webEngine.load(urlGoogleMaps.toExternalForm());

          getChildren().add(webView);
        
      }
    
  }
}


Related:
- Embed OpenLayers with OpenStreetMap in JavaFX WebView


張貼者： Unknown
標籤： , , ,

16 comments:

  1. fopApril 30, 2012 at 11:15 AM

    Hello, I wonder if anyone has done more tests to verify that the webview is robust enough to withstand the generated javascript google maps api?

    ReplyDelete
  2. Andrew009May 18, 2012 at 8:24 AM

    hi, i want to know if you know how to call scripts in the googlemaps.hmtl file??? TY :D

    ReplyDelete
  3. fopMay 18, 2012 at 8:32 AM

    http://java-buddy.blogspot.com.br/2012/03/execute-javascript-in-webview-from-java.html

    This url answer your question.

    Regards

    ReplyDelete
  4. Andrew009May 31, 2012 at 10:14 AM

    now i want to save some variables from JAVASCRIPT TO JAVAFX, for example, when a user click on the google map, save that latitude and longitude inside of my JAVAFX Aplication. I know first that var go to javascript, so how save them to JAVAFX to manipulate it later on my aplication ?

    regards :D

    ReplyDelete
  5. LindaJuly 1, 2012 at 5:11 AM

    This is the best blog javafx i've ever seen... who is the writer of java-buddy?? thank you so much...

    ReplyDelete
  6. JimOctober 16, 2012 at 4:59 PM

    Mouse operations on the map don't seem to work: clicking and dragging, double-click to zoom, and scroll wheel to zoom. I noticed that the mouse operations DO work on your OpenLayers example. The java code is almost identical, so I'm guessing the issue is in the javascript from Google. Do you know how to get the mouse actions working on the map?

    Thanks for the JavaFX examples!

    ReplyDelete
  7. E7October 23, 2012 at 3:37 PM

    Its ur JavaFX version, somehow it doesnt work in 2.2. Get 2.1, it works there.

    Anyone having troubles with overlays disappearing??

    ReplyDelete
    Replies
    1. UnknownOctober 23, 2012 at 8:37 PM

      hello E7,

      I re-test it on JavaFX 2.2, and it still work as expected. Can you explain in more details?

      Delete
    2. fopOctober 24, 2012 at 5:26 AM

      Yes E7, i had the same problem, but the reason it is still unknown for me, but i found a workaround it seems solved. Put this vm argument "-Dsun.java2d.ddoffscreen=false" to launch your java application.

      Delete
  8. E7October 24, 2012 at 12:14 PM

    Buddy, the 2.2. gives you the android interface to control the map, in the 2.1 version it looks like in any other browser, so its all good for me.

    Thanks for the answer fop, i added the vm argument in eclipse but the issue persists. The overlays disappear when zooming in/out, at least just visually, they remain clickable. Somehow markes never disappear. Its quite a bug.

    ReplyDelete
  9. UnknownDecember 2, 2012 at 1:53 PM

    I would like to use JavaFX 2.2.3 to embed Google Earth instead, is there a way to do this ??

    ReplyDelete
  10. UnknownDecember 16, 2012 at 3:24 AM

    Is there any method to passing JavaFX array to javascript array?

    ReplyDelete
  11. AnonymousJune 29, 2015 at 1:25 AM

    Hello, I would like to know how to get the coordinates by clicking on the map? and get the coordinates of where I click and address these coodenadas or place them in a swing textfield
    please help!

    ReplyDelete

Subscribe to: Post Comments (Atom)