Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/WEB-INF/googlemaps.tld" prefix="googlemaps"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Googlemaps</title>
</head>
<body>
<googlemaps:map id="map" width="250" height="300" version="2" type="STREET" zoom="12">
<googlemaps:key domain="localhost" key="MEIN_KEY"/>
<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" state="MD" zipcode="21921" country="US"/>
</googlemaps:map>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>
TestGoogleMaps</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="/WEB-INF/googlemaps.tld" prefix="googlemaps"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Googlemaps</title>
<googlemaps:map id="map" width="250" height="300" version="2" type="STREET" zoom="12">
<googlemaps:key domain="localhost" key="ABQIAAAAU5IDceLqYFSp4k84FYLxyRTwM0brOpm-All5BF6PoaKBxRWWERSDiAIGyx-hbmMfA3v7tHF4Tvwfaw"/>
<googlemaps:point id="point1" address="74 Connors Lane" city="Elkton" state="MD" zipcode="21921" country="US"/>
<googlemaps:marker id="marker1" point="point1"/>
</googlemaps:map>
<googlemaps:scripttag id="map" scope="page" />
<googlemaps:javascript id="map"></googlemaps:javascript>
</head>
<body onunload="GUnload()">
<googlemaps:div id="map" scope="page"></googlemaps:div>
<googlemaps:initialize id="map" scope="page"/>
</body>
</html>
Error(12): Instanziieren von Tag nicht möglich: googlemaps:map (Klasse: com.lamatek.tags.google.GoogleMapTag) Vergewissern Sie sich, dass die Tag-Klasse verfügbar ist und die Tag Library, die die Klasse enthält, nicht von dieser Anwendung ausgeschlossen ist.
Error(12): Klasse für Bean: null nicht gefunden, definiert durch Tag mit Klasse: com.lamatek.tags.google.GoogleMapTag
Error(13): Instanziieren von Tag nicht möglich: googlemaps:key (Klasse: com.lamatek.tags.google.GoogleMapKeyTag) Vergewissern Sie sich, dass die Tag-Klasse verfügbar ist und die Tag Library, die die Klasse enthält, nicht von dieser Anwendung ausgeschlossen ist.
Error(13): Klasse für Bean: null nicht gefunden, definiert durch Tag mit Klasse: com.lamatek.tags.google.GoogleMapKeyTag
<context-param>
<param-name>org.ajax4jsf.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<script type="text/javascript">
//<![CDATA[
function createPoints(data) {
for (var i = 0; data.length; i++) {
var point = new GLatLng(data[i].lat, data[i].lng);
map.addOverlay(createMarkerWithIdentifier(point, data[i].desc));
}
}
function createMarkerWithIdentifier(point, desc) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});
return marker;
}
//]]>
</script>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<f:view>
<h:panelGrid columns="2">
<rich:gmap binding="#{gmBean.map}"/>
</h:panelGrid>
<h:form>
<a4j:jsFunction name="initializePoints" data="#{gmBean.points}"
oncomplete="createPoints(data)">
</a4j:jsFunction>
</h:form>
</f:view>
</body>
</html>
<managed-bean>
<managed-bean-name>gmBean</managed-bean-name>
<managed-bean-class>org.richfaces.demo.gmap.Bean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
package org.richfaces.demo.gmap;
import java.util.ArrayList;
import java.util.HashMap;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import org.richfaces.component.html.HtmlGmap;
public class Bean {
//------------------------------------------------------------------------------------------------------------------
// FIELDS
//------------------------------------------------------------------------------------------------------------------
/** google map */
private HtmlGmap map;
/** whole authorization for google map */
private String gmapKey;
/** google key for this application */
private static final String GOOGLE_API_KEY = "google api key einfügen"
/** application url */
private static final String APPL_URL = "url der applikation - localhost:8080 e.g.";
/** host string */
private static final String HOST = "host";
/** error message if key is not generated for <code>Bean.APPL_URL</code> */
private static final String KEY_ERROR_MSG =
"get the key for your domain at http://www.google.com/apis/maps/signup.html";
/** style of the google map */
private static final String MAP_STYLE = "width:400px;height:400px";
/** java script method which load points for google map - ajax4jsf script */
private static final String LOAD_POINTS_INITIALIZE = "initializePoints()";
/** google map initial zoom */
private static final String MAP_ZOOM_INITIAL = "5";
/** google map initial lattidude value */
private static final String MAP_LATTIDUDE_INITIAL = "37.4419";
/** google map initial longtidude value */
private static final String MAP_LONGTIDUDE_INITIAL = "-122.1419";
/** google map initial type of show value */
private static final String MAP_TYPE_INITIAL = "G_NORMAL_MAP";
/** google map variable for java script */
private static final String MAP_GMAP_VAR = "map";
/** contains google map points data */
private ArrayList<Place> points;
private String longtitude;
private String lattidude;
private Boolean activate = false;
//------------------------------------------------------------------------------------------------------------------
// CONSTRUCTOR
//------------------------------------------------------------------------------------------------------------------
/**
* constructor
*/
public Bean() {
this.points = this.loadDataForMap();
}
//------------------------------------------------------------------------------------------------------------------
// HELPER METHODS
//------------------------------------------------------------------------------------------------------------------
/**
* reset user input from view
*/
private void resetInput() {
this.longtitude = "";
this.lattidude = "";
}
/**
* load points for google map
* @return tmp loaded point data for map
*/
private ArrayList<Place> loadDataForMap() {
ArrayList<Place> tmp = new ArrayList<Place>();
tmp.add(new Place ("goldengate", "/org/richfaces/demo/gmap/images/gold.gif", "37.81765", "-122.477603" , 14,
"Golden Gate Bridge, San Francisco"));
tmp.add(new Place ("eiffeltower", "/org/richfaces/demo/gmap/images//tower.gif", "48.858489", "2.295295" , 17,
"Eiffel Tower, Paris"));
tmp.add(new Place ("pyramids", "/org/richfaces/demo/gmap/images/pyramids.gif", "29.977785", "31.132915" , 15,
"Pyramids of Egypt, Giza"));
tmp.add(new Place ("exadel", "/org/richfaces/demo/gmap/images/exadel.gif", "37.971796", "-122.042334" , 18,
"Headquarter of Exadel, Inc , Concord"));
return tmp;
}
/**
* create the whole google map key
* @return key generated key
*/
private String createKey() {
HashMap<String, String> hosts = new HashMap<String, String>();
hosts.put(Bean.APPL_URL, Bean.GOOGLE_API_KEY);
ExternalContext ec = FacesContext.getCurrentInstance().getExternalContext();
String host = (String)ec.getRequestHeaderMap().get(Bean.HOST);
String key = hosts.get(host);
if (key != null)
return key;
else
return Bean.KEY_ERROR_MSG;
}
/**
* dummy button - just test
*
*/
public void doSomething() {
System.out.println("laft");
this.map.getGmapVar();
this.map.getAttributes();
}
//------------------------------------------------------------------------------------------------------------------
// GETTER/SETTER
//------------------------------------------------------------------------------------------------------------------
/**
* getter method
* @return gmapKey
*/
public String getGmapKey() {
if (gmapKey == null) {
gmapKey = createKey();
}
return gmapKey;
}
/**
* setter method
* @param gmapKey
*/
public void setGmapKey(final String gmapKey) {
this.gmapKey = gmapKey;
}
/**
* getter method
* @return map
*/
public HtmlGmap getMap() {
return this.map;
}
/**
* setter method
* also initialized google map
* @param map
*/
public void setMap(final HtmlGmap map) {
if (this.map == null) {
this.map = map;
this.map.setGmapVar(Bean.MAP_GMAP_VAR);
this.map.setOninit(Bean.LOAD_POINTS_INITIALIZE);
this.map.setZoom(Bean.MAP_ZOOM_INITIAL);
this.map.setStyle(Bean.MAP_STYLE);
this.map.setGmapKey(this.getGmapKey());
this.map.setLat(Bean.MAP_LATTIDUDE_INITIAL);
this.map.setLng(Bean.MAP_LONGTIDUDE_INITIAL);
this.map.setMapType(Bean.MAP_TYPE_INITIAL);
} else {
this.map = map;
}
}
/**
* getter method
* @return points
*/
public ArrayList<Place> getPoints() {
return this.points;
}
/**
* setter method
* @param points
*/
public void setPoints(final ArrayList<Place> points) {
this.points = points;
}
public String getLongtitude() {
return longtitude;
}
public void setLongtitude(String longtitude) {
this.longtitude = longtitude;
}
public String getLattidude() {
return lattidude;
}
public void setLattidude(String lattidude) {
this.lattidude = lattidude;
}
public Boolean getActivate() {
return activate;
}
public void setActivate(Boolean activate) {
this.activate = activate;
}
}
package org.richfaces.demo.gmap;
public class Place {
private String pic;
private String id;
private String lat;
private String lng;
private int zoom;
private String desc;
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
public Place(String id, String pic, String lat, String lng, int zoom, String desc) {
super();
this.id = id;
this.pic = pic;
this.lat = lat;
this.lng = lng;
this.zoom = zoom;
this.desc = desc;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getLat() {
return lat;
}
public void setLat(String lat) {
this.lat = lat;
}
public String getLng() {
return lng;
}
public void setLng(String lng) {
this.lng = lng;
}
public int getZoom() {
return zoom;
}
public void setZoom(int zoom) {
this.zoom = zoom;
}
public String getPic() {
return pic;
}
public void setPic(String pic) {
this.pic = pic;
}
}
hoffe das hilft weiter, wenn nicht meld dich wieder.
mfg