<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:sandbox="http://richfaces.org/sandbox/gmapMarker"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<title>gmapMarker sample</title>
<style type="text/css">
#calendar {
float: right;
width: 200px;
}
</style>
</head>
<body>
<ui:include src="menu.xhtml"/>
<fieldset>
<legend>Add marker with JavaScript</legend>
<form action="#">
Latitude <input type="text" id="lat"/>
Longitude <input type="text" id="lng"/>
Title <input type="text" id="title"/>
Draggable <input type="checkbox" id="draggable"/>
<input type="button" value="Add marker" onclick="addMarker()"/>
</form>
<script type="text/javascript">
function addMarker() {
RichFaces.addGmapMarker('gmap',
document.getElementById('lat').value,
document.getElementById('lng').value,
{
title:document.getElementById('title').value,
draggable:document.getElementById('draggable').checked
});
}
</script>
</fieldset>
<rich:gmap gmapVar="gmap" lat="50" lng="32" zoom="2" style="width:100%"
gmapKey="ABQIAAAAJRoUgtOKQgPPTRmZNJcFRBQ03jzigXrzGoTeBBI15yVgqSobkRSrWVFeSVl33ncpBGX7XrKdYdUaCg">
<sandbox:gmapMarker latitude="50" longitude="32" title="Ukraine" autoPan="false" bounceGravity=".5"
draggable="true" onclick="alert(marker.getTitle()+'('+latlng.lat()+';'+latlng.lng()+')')"
clickable="true"/>
<sandbox:gmapMarker latitude="20" longitude="52" title="Saudi Arabia - click me!" draggable="true"
icon="https://issues.jboss.org/secure/attachment/12326770/richfaces_icon_64px.gif"
iconWidth="32" iconHeight="32">
<f:facet name="infoWindow">
<h:panelGroup>
<h:outputText value="Gubik"/><br/>
<h:graphicImage value="http://in.relation.to/service/File/11358" width="300"/>
</h:panelGroup>
</f:facet>
</sandbox:gmapMarker>
</rich:gmap>
<script type="text/javascript">
RichFaces.addGmapMarker('gmap', 10.0, 22.0, {title:'Toro'});
</script>
<rich:insert src="/sample_1.xhtml" highlight="html"/>
</body>
</html>