nicht angemeldet
Hallo allerseits,
ich beschäftige mich erst seit kurzer Zeit mit XHTML und Java Server Faces und hoffe es kann mir vielleicht jemand von euch helfen.
Ich möchte mit JSF (keine jsp`s) und Google-Maps Informationen von Hotels darstellen lassen. Es soll also eine Seite dargestellt werden, welche einmal eine Map abbildet auf der die Hotels mit Pins gekennzeichnet sind. Daneben soll dann eine weitere Tabellenspalte alle Orte mit ihrem namen auflisten. in einer großen Sektion unterhalb dieser beiden Spalten sollen dann die zusätzlichen Informationen des ausgewählten Hotels angezeigt werden.
Soviel zur Vorrede, was ich bislang habe ist eine XHTML welche sich alle Daten aus einem Bean holt - funktioniert. Auch die Map und die Pins gehen. Allerdins habe ich 2 Probleme:
1.) Ich schaffe es nicht, die Namen der Orte auf der oben genannten rechten Spalte auszugeben und mit den Pins zu verlinken. Hatte das mal in purem HTML versucht und es ging wunderbar, Nun funktioniwert allerdings das "documents.getElementbyID" in der unten angeführten XHTML nicht. Was mache ich da falsch??
2.) Hat jemand Ahnung, wie ich die Map beim Aufruf der Seite leer initialisieren kann bzw. beim Verlassen der Seite löschen kann? Es ergeben sich nei mir Probleme wenn ich von Seite 1 zu Seite 2 wechsle und beide Seiten eine Google-Map beinhalten.
Würde mich freun wenn mir jemand helfen kann. Hier die angesprochene XHTLM:
<!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">
<h:form>
<rich:spacer height="100" />
<h:panelGrid columns="2" border="1">
<h:panelGroup>
<h:panelGrid columns="2" border="5">
<rich:gmap id="gm2" lat="9.5391" lng="97.9405" zoom="11" gmapVar="map2"
gmapKey="...derkeyhalt..."
style="width:500px;height:400px" />
<!-- JScript Funktionen der Map: -->
<h:panelGroup>
Controls:<br />
<a href="javascript:void(0);" onclick="map2.hideControls();return false;">Remove</a>
<a href="javascript:void(0);" onclick="map2.showControls();return false;">Show</a>
<br /><br />
Type:<br/>
<a href="javascript:void(0);" onclick="map2.setMapType(G_NORMAL_MAP);return false;">Normal</a>
<a href="javascript:void(0);" onclick="map2.setMapType(G_SATELLITE_MAP);return false;">Satellite</a>
<a href="javascript:void(0);" onclick="map2.setMapType(G_HYBRID_MAP);return false;">Hybrid</a>
<br /><br />
Zoom:<br/>
<a href="javascript:void(0);" onclick="map2.zoomIn();return false;">Zoom ++</a>
<a href="javascript:void(0);" onclick="map2.zoomOut();return false;">Zoom --</a>
<br /><br />
<a href="javascript:void(0);" onclick="zoomIt();return false;">zoom_von_Bean</a>
<br /><br />
<a href="javascript:void(0);" onclick="initializePoints();return false;">a4j-Test</a>
<br /><br />
</h:panelGroup>
</h:panelGrid>
<script type="text/javascript">
//<![CDATA[
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var a = 0;
function zoomIt() {
map2.setZoom(#{Bean.zoom});
}
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function setCenter(lag, lat, zoom) {
map2.setCenter(new GLatLng(lag, lat), zoom);
var ulp = new GPoint(lag,lat);
var ul = G_NORMAL_MAP.getProjection().fromPixelToLatLng(ulp,zoom);
}
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
function createPoints(data) {
for (var i = 0; data.length; i++) {
var point = new GLatLng(data[i].latitude, data[i].longitude);
map2.setCenter(point);
map2.setZoom(16);
// gmarkers[a] = marker;
// htmls[a] = beschreibung;
side_bar_html += '<a href="javascript:myclick(' + a + ')">' + data[i].beschreibung + '</a><br>';
alert(side_bar_html);
a++;
map2.addOverlay(createMarkerWithIdentifier(point, data[i].beschreibung));
}
document.getElementById("side_bar").innerHTML = side_bar_html;
}
function createMarkerWithIdentifier(point, beschreibung) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(beschreibung);
});
return marker;
}
//]]>
</script>
<a4j:jsFunction name="initializePoints" data="#{Bean.hotels}"
oncomplete="createPoints(data)">
</a4j:jsFunction>
</h:panelGroup>
<h:panelGroup>
<!-- HIER SOLL DIE LISTE HIN -->
<div id="side_bar">
</div>
</h:panelGroup>
</h:panelGrid>
<a4j:commandButton action="Hotels"
style="height : 24px; width : 160px;" value="Hotels">
</a4j:commandButton>
</h:form>
</ui:composition>