Blame view

samples/gmapMarker-sample/src/main/webapp/sample_1.xhtml 2.62 KB
bernard authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!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>