How to integrate google-maps in a vaadin page?
Question
I want to embed google-maps inside an existing vaadin webpage.
Problem: vaadin is written in java, so no html or javascript lines are coded.
There is an example on how to integrate maps using a static webpage: https://developers.google.com/maps/documentation/javascript/examples/map-simple
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
As you see, this requires <script> stuff inside the page.
Question: how can I include those script content using vaadin? Plus how could I then pass the geocoordinates dynamically to the javascript function?
(I don't want to use any vaadin addon for this, as I simple just want to show the map).
2 answers
solution1
3 ACCPTED 2015-07-15 10:23:03
You can create a custom component in vaadin, and call the javascript code in the constructor of your custom component. This is easier said than done, so here's how you should be doing it:
Vaadin-UI page:
protected void init(VaadinRequest request) {
/****************************************************
* Create instance of custom component and set an id
***************************************************/
Map mapobject = new Map();
mapobject.setId("mapob");
..
..
..
..
}
Then create a new java class with the name Map.java (your component) This class should be something like this:
import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({ "myscript.js", "https://maps.googleapis.com/maps/api/js?v=3.exp"})
@StyleSheet({ "mystyle.css" })
//Extend AbstractJavaScriptComponent
public class Map extends AbstractJavaScriptComponent {
float param1=123;
float param2=456;
public Map() {
callFunction("myfunction",param1,param2); //Pass parameters to your function
}
}
Now, the last step is to create your js and css files which you have linked.
Create --> myscript.js and mystyle.css files
Define all your styling in the css as it is
In your JS, define your function as follows:
window.your_package_name_Map = function() { //Put correct package name
this.myfunction = function(latitude, longitude) { //Accept the parameters
var map;
//mapob is the id of your component
map = new google.maps.Map(document.getElementById("mapob"), {
zoom: 8,
center: {lat: latitude, lng: longitude}
});
google.maps.event.addDomListener(window, 'load', initialize);
}
};
This should do it. I hope I haven't missed anything
solution2
-1 2015-07-15 15:46:51
I don't really see why you could not use the addon, so you should use that:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.