Directory

Google Maps Addon

Vaadin 14+ addon for Google Maps Web Component

View larger

Close

This addon provides a simple wrapper around Google Maps web component.

Currently supported features:

• Programmatic server-side panning and zooming
• Adding/removing markers
• Adding/removing polygons
• Adding click listener to polygons

Sample code

            GoogleMap gmaps = new GoogleMap(apiKey,null,null);
            gmaps.setMapType(MapType.SATELLITE);
            gmaps.setSizeFull();
            gmaps.setCenter(new LatLon(0,0));
            gmaps.addMarker("Center", new LatLon(0,0), true, "");
            GoogleMapPolygon gmp = gmaps.addPolygon(Arrays.asList(new GoogleMapPoint(gmaps.getCenter()),
    		new GoogleMapPoint(gmaps.getCenter().getLat(),gmaps.getCenter().getLon()+1),
    		new GoogleMapPoint(gmaps.getCenter().getLat()+1,gmaps.getCenter().getLon())));

GoogleMapPolygon gmp = gmaps.addPolygon(Arrays.asList(
	    		new GoogleMapPoint(gmaps.getCenter().getLat(),gmaps.getCenter().getLon()+1),
	    		new GoogleMapPoint(gmaps.getCenter().getLat()+1,gmaps.getCenter().getLon()),
	    		new GoogleMapPoint(gmaps.getCenter().getLat(),gmaps.getCenter().getLon()-1),
					new GoogleMapPoint(gmaps.getCenter().getLat() - 1, gmaps.getCenter().getLon()),
					new GoogleMapPoint(gmaps.getCenter().getLat(), gmaps.getCenter().getLon() + 1)));
			gmp.setClosed(false);
			gmp.setIcons(new Icon("M -2,0 0,-2 2,0 0,2 z", "#F00", "#FF0", 1, 25));

			GoogleMapMarker flowingmarker = gmaps.addMarker("Center", new LatLon(-31.636036, -60.7055271), true,
					"https://www.flowingcode.com/wp-content/uploads/2020/06/FCMarker.png");
			flowingmarker.addInfoWindow("<h1>Flowing Code</h1>");

Links

• Online Demo
• Author Homepage
• View on GitHub
• Issue tracker

Compatibility