JSF, Richfaces und Google-Map

S

schlumsch

Mitglied
Ja hallo allerseits,

also mein Problem welches ich in einem anderen Beitrag schon einmal erläutert hatte hat sich ein wenig verschoben, deswegen der neue Thread :)

Folgendes Problem(chen): Ich habe ein Portlet und zeige dort erfolgreich eine Google-Map an. Was ich nun machen möchte ist den momentan noch "statisch" vorgegebenen Inhalt (Marker etc.) auf mein Bean zu lenken. Das fängt damit an, dass ich in meinem bean mit ben int zoom den Zoomfaktor der Map setzen möchte. Wenn ich in den Map-Tag
<rich:gmap id="gm" lat="37.97" zoom="11" gmapVar="map".......
eintrage geht alles wunderbar. Wenn ich nun aber das folgende probiere geht garnix mehr:
<rich:gmap id="gm" lat="37.97" zoom="#{Bean.zoom}" gmapVar="map"
(das bean ist auich richtig geschrieben)

Kann mir jemand verraten was ich da falsch mache?

Das nächste wäre dann, dass ich meine Hotelliste aus meinem bean anhand von markern auf der Map darstelle. kann mir vielleicht auch jemand dazu helfen

Danke schonmal und hier der Code vom bean und xhtml:

bean.java:
Code: 
package com.e2e.portal.hotel;


import java.util.ArrayList;
import java.util.List;
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;

import com.e2e.common.user.UnknownUserException;
import com.e2e.itps.user.UserAuthentication;
import com.e2e.itps.user.UserContext;
import com.e2e.portal.service.User;

import e2e.ta.portal.model.UserProfile;



public class Bean {
	
	/** hotelliste, Membervariable place definiert in Place.java */
	private ArrayList<Place> hotels;



	/** 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 =  "ABQIAAAAt7d08eLbEl8sARZc79uNIxRi_j0U6kJrkFvY4-OX2XYmEAa76BQOIJMzNMrTMDjm_v0DPOkfQXL1tg";
			
	/** application url */
	private static final String APPL_URL = "localhost:8080";
	
	/** host string */
	private static final String HOST = "localhost";
	
	/** 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 = "10.710382";
	
	/** google map initial longtidude value */
	private static final String MAP_LONGTIDUDE_INITIAL = "50.604977";
	
	
	/** 
	* file:///home/ahm/Development/Projects/EclipseProjects/TPS.war
	* /WEB-INF/html/geocode.html?
	* name1=bla1&long1=10.710382&lat1=50.604977&
	* name2=bla2&long2=10.712500&lat2=50.604937&
	* name3=bla3&long3=10.698500&lat3=50.602965
	* */
	
	
	/** 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";
	
// Hilfsvariablen für reset-funktion:
	
	private String longtitude;
	
	private String lattidude;
	
	private Boolean activate = false;
	
	private int zoom=11;

	/**
	 * constructor
	 */
	public Bean() {
		zoom=1;
		this.hotels = this.loadDataForMap();
	}
		
	/**
	 * load points for google map
	 * @return tmp loaded point data for map
	 */


//----------------------------
// ArrayListe der Hotels laden
//------------------------
	
	private ArrayList<Place> loadDataForMap() {
		ArrayList<Place> result = new ArrayList<Place>();
//		Place tmpplace = new Place ("goldengate", "Adresse", "/org/richfaces/demo/gmap/images/gold.gif", 37.81765, -122.477603 , 14, "Golden Gate  Bridge, San Francisco");
//		result.add(tmpplace);
		
		result.add(new Place ("goldengate", "Adresse", "/org/richfaces/demo/gmap/images/gold.gif", 37.81765, -122.477603 , 14, "Golden Gate  Bridge, San Francisco"));
		result.add(new Place ("eiffeltower", "Adresse", "/org/richfaces/demo/gmap/images//tower.gif", 48.858489, 2.295295, 17, "Eiffel Tower, Paris"));
		result.add(new Place ("pyramids", "Adresse", "/org/richfaces/demo/gmap/images/pyramids.gif", 29.977785, 31.132915 , 15, "Pyramids of Egypt, Giza"));
		result.add(new Place ("exadel", "Adresse", "/org/richfaces/demo/gmap/images/exadel.gif", 37.971796, -122.042334 , 18, "Headquarter of Exadel, Inc , Concord"));	
		return result;
	}
	
	/**
	 * reset user input from view
	 */
	private void resetInput() {
		this.longtitude = "";
		this.lattidude = "";
	}
	/**
	 * 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;
			*/
		return GOOGLE_API_KEY;
	}
	
	/**
	 * dummy button - just test
	 *
	 */
	public void doSomething() {
		System.out.println("testtestbalblablubb");
		this.map.getGmapVar();
		this.map.getAttributes();
	}
	
	//------------------------------------------------------------------------------------------------------------------
	// GETTER/SETTER
	//------------------------------------------------------------------------------------------------------------------


	public String getGmapKey() {
		if (gmapKey == null) {
			gmapKey = createKey();
		}
		return gmapKey;
	}


	public void setGmapKey(final String gmapKey) {
		this.gmapKey = gmapKey;
	}


	public HtmlGmap getMap() {
		return this.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;
		}
	}

	/**
	 * @return the hotels
	 */
	public ArrayList<Place> getHotels() {
		return hotels;
	}

	/**
	 * @param hotels the hotels to set
	 */
	public void setHotels(ArrayList<Place> hotels) {
		this.hotels = hotels;
	}

	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;
	}

	/**
	 * @return the zoom
	 */
	public int getZoom() {
		return zoom;
	}

	/**
	 * @param zoom the zoom to set
	 */
	public void setZoom(int zoom) {
		this.zoom = zoom;
	}
}

xhtml:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:rich="http://richfaces.org/rich"
           xmlns:gmap="http://labs.jboss.com/jbossrichfaces/ui/gmap"
      xmlns:a4j="http://richfaces.org/a4j">

  <f:view contentType="text/html" >

  <body>

<h:panelGrid  columns="2">
	<rich:gmap id="gm" lat="37.97" zoom="#{Bean.zoom}" gmapVar="map"
	 gmapKey="ABQIAAAAt7d08eLbEl8sARZc79uNIxRi_j0U6kJrkFvY4-OX2XYmEAa76BQOIJMzNMrTMDjm_v0DPOkfQXL1tg"
	  style="width:500px;height:400px" />
	  
	  
	  <h:panelGroup>
		Controls:<br />
		<a href="javascript:void(0);" onclick="map.hideControls();return false;">Remove</a>
		<a href="javascript:void(0);" onclick="map.showControls();return false;">Show</a>
		<br /><br />
		Type:<br/>
		<a href="javascript:void(0);" onclick="map.setMapType(G_NORMAL_MAP);return false;">Normal</a>
		<a href="javascript:void(0);" onclick="map.setMapType(G_SATELLITE_MAP);return false;">Satellite</a>
		<a href="javascript:void(0);" onclick="map.setMapType(G_HYBRID_MAP);return false;">Hybrid</a>
		<br /><br />
		Zoom:<br/>
		<a href="javascript:void(0);" onclick="map.zoomIn();return false;">In</a>
		<a href="javascript:void(0);" onclick="map.zoomOut();return false;">Out</a>
		<br /><br />
		<a href="javascript:void(0);" onclick="schlumsch();return false;">the Author</a>
		
	</h:panelGroup>	
	<h:form>
			
        </h:form>
               
</h:panelGrid>   


	<a4j:outputPanel>
	   <script>
	   
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

	   

	   function schlumsch() {

	    var point = new  GLatLng(50.604977,10.710382);
	    map.setCenter(point);
      	var marker = createMarker(point,'turn2stone: <a target="_blank" href="http://www.schlumsch.eu">schlumsch</a>');

		map.setZoom(16);
		map.addOverlay(marker);
	   
	   }
	   
	    function setCenter(lag, lat, zoom) {

	       map.setCenter(new GLatLng(lag, lat), zoom);
	       var ulp = new GPoint(lag,lat);
      var ul = G_NORMAL_MAP.getProjection().fromPixelToLatLng(ulp,zoom); 
	       
	    }
	   </script>
	</a4j:outputPanel>


</body>
</f:view>

</ui:composition>
 
Hi,

hast Du (oder sonst jemand) vielleicht mittlerweile ne Lösung für dieses Problem gefunden? Ich stehe auch grade vor genau dieser Frage und wäre für jede Hilfe dankbar... :)
 
Ja, hallo erst einmal. Das Thema ist schon lange lange her und ich kann dir da sicher helfen, habe ja selbst erfahren müssen wie "widerspänstig" die GMap ist. Was genau willst du machen?
 
Hallo,

jaja, ich hätte vielleicht ein bisschen spezifischer sein sollen :)

Ich habe eine Liste von Orten/Koordinaten im Backing Bean, die ich anzeigen will - und zwar zum einen in einer Tabelle und als Marker auf der Karte. Die Tabellenanzeige ist kein Thema, aber wie ich mit der Karte vernünftig interagiere ist mir noch nicht ganz klar.

Ich bin mittlerweile so weit, dass ich die Marker zumindest mal auf die Map bekomme, aber die Lösung gefällt mir nicht so recht: Ich habe eine a4j:jsFunction definiert, welche die Koordinaten nachlädt und mit einer JS-Funktion zur Map hinzufügt.
HTML: 
<a4j:jsFunction name="loadMarkers" data="#{mapBean.coordinates}" oncomplete="addMarkers(data);" reRender="mytable">
</a4j:jsFunction>
Diese Funktion lädt also die Koordinaten vom mapBean per AJAX und ruft eine weitere eigene JS-Funktion auf, welche die Marker auf die GMap setzt. Durch das reRender-Attribut werden zudem die Daten in der Tabelle aktualisiert.

Die Funktion ist in der gmap-Definition als oninit="loadMarkers()" vermerkt, so dass die Marker nach Initialisierung der GMap geladen und der Karte hinzugefügt werden. Bei Bedarf kann ich diese loadMarkers-Funktion später auch erneut verwenden, um die Informationen über AJAX zu aktualisieren.


Diese Lösung wirkt auf mich aber recht unschön, weil beim initialen Laden der Seite bereits die Information über die Koordinaten enthalten sind (in der Tabelle), diese aber dennoch unmittelbar danach erneut per AJAX nachgeladen werden müssen, um sie auch auf die Karte zu bekommen...

Daher frage ich mich, ob das nicht irgendwie sauberer geht...? Für alternative Ideen/Vorschläge bin ich dankbar...

Außerdem würde ich den Markern auf der Karte später gerne jeweils ein InfoWindow mit ggf. komplexem Inhalt zuteilen - und ideal wäre es natürlich, wenn ich diesen Inhalt ebenfalls über JSF definieren könnte. Ich habe allerdings keine Idee, wie das zu bewerkstelligen wäre...
 
Ja, also sorry wegen der verspäteten Antwort. Es ist schion ein wenig her, dass ich das ganze implementiert habe. Ich hänge einfach mal meinen Code anbei, denke mal du suchst dir dann schon die Lösung :-)

in jsf i Tabelle:
Code: 
						<span onclick="showPlace('#{hotel.id}')">
			    					<h:outputText style="font-weight:bold; text-decoration:underline;" value="#{hotel.name}" />
			    		</span>

die Funktion in jsf:

Code: 
						<a4j:jsFunction name="showPlace" data="#{Bean.selectedHotel}"
							oncomplete="showAnderesHotel(data);"
							reRender="sTable,selectedHotelTable,detailansicht,tabPanelUeberschrift,tabPanel1,historyPanel, finalSelectionGrid">
							<a4j:actionparam name="id" assignTo="#{Bean.hotelSelection}"></a4j:actionparam>
						</a4j:jsFunction>


JS-Funktion in jsf:

Code: 
	 		        var baseIcon = new GIcon(G_DEFAULT_ICON);
	 	        baseIcon.shadow = "...url...";
	 	        baseIcon.iconSize = new GSize(20, 34);
	 	        baseIcon.shadowSize = new GSize(37, 34);
	 	        baseIcon.iconAnchor = new GPoint(9, 34);
	 	        baseIcon.infoWindowAnchor = new GPoint(9, 2);


	 					   function showAnderesHotel(data) {
	 					    var point = new  GLatLng(data.latitude,data.longitude);
	 					    map2.setCenter(point);
	 				      	var marker = createMarker(point,data.name);
							map2.setZoom(16);
	 						map2.addOverlay(marker);
	 						document.body.style.cursor = "default";
	 					   }

		 	        function createMarker(point,html) {
	 				        var marker = new GMarker(point);
	 				        GEvent.addListener(marker, "click", function() {
	 				          marker.openInfoWindowHtml(html);
	 				        });
	 				        return marker;
	 			}

Wenn du deine Daten aus deinem Bean schon anzeigen kannst, brauchst du ja sicher den Teil meines Codes nicht. Hilft das ein wenig

lg
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück