Aşağıdaki örnekte kullanıcıya google map gösteriyoruz. Kullanıcı marker'ı sürükleyerek istedediği bir konumu seçmesini sağlıyoruz :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function updateMarkerPosition(latLng) {
document.getElementById('testform:info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
document.getElementById('testform:infoLatitude').value = latLng.lat();
document.getElementById('testform:infoLongitude').value = latLng.lng();
}
function initialize() {
var latLng = new google.maps.LatLng(41.00554818815703, 29.036333984374778);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerPosition(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
width: 400px;
height: 400px;
}
</style>
</h:head>
<body>
<h:form id="testform">
<div id="mapCanvas"></div>
<h:outputText id="info" value="Koordinarlar Buraya Yazılacak" />
<h:inputHidden value="#{testBean2.latitude}" id="infoLatitude"/>
<h:inputHidden value="#{testBean2.longitude}" id="infoLongitude"/>
<h:commandButton action="#{testBean2.submit}" value="Ok" />
</h:form>
</body>
</html>
Java Bean kısmı ise sadece latitude ve longitude şeklinde iki özelliği vardır ve submit edildiğinde bu değerleri ekrana basmaktadır :
@ManagedBean
@SessionScoped
public class TestBean2 {
String latitude;
String longitude;
public String getLatitude() {
return latitude;
}
public void setLatitude(String latitude) {
this.latitude = latitude;
}
public String getLongitude() {
return longitude;
}
public void setLongitude(String longitude) {
this.longitude = longitude;
}
public String submit(){
System.out.println("latitude:"+latitude);
System.out.println("longitude:"+longitude);
return "";
}
}
Google map varsayılan olarak İstanbul ile açılacaktır. Marker drag işlemi tamamlandığında updateMarkerPosition fonksiyonu çağrılacak ve infoLatitude ve infoLongitude hidded form değerleri set edilir.