<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function geocode() {
        PF('geoMap').geocode(document.getElementById('address').value);
    }

    function reverseGeocode() {
        var lat = document.getElementById('lat').value,
            lng = document.getElementById('lng').value;

        PF('revGeoMap').reverseGeocode(lat, lng);
    }
</script>


<h:form prependId="false">
    
    <h3 style="margin-top:0">Geocode</h3>
    <h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
        <p:outputLabel for="address" value="Address:" />
        <p:inputText id="address" />
        <p:commandButton value="Geocode" icon="pi pi-search" onclick="geocode()" type="button" />
    </h:panelGrid>
    
    <p:gmap id="geoGmap" widgetVar="geoMap" center="#{geocodeView.centerGeoMap}" zoom="2" type="ROADMAP" model="#{geocodeView.geoModel}" style="width:100%;height:400px">
        <p:ajax event="geocode" listener="#{geocodeView.onGeocode}" update="@this" />
    </p:gmap>

    <h3>Reverse Geocode</h3>
    <h:panelGrid columns="5" style="margin-bottom:10px" cellpadding="5">
        <p:outputLabel for="lat" value="Lat:" />
        <p:inputText id="lat" />
        <p:outputLabel for="lng" value="Lng:" />
        <p:inputText id="lng" />
        <p:commandButton value="Reverse Geocode" icon="pi pi-search" onclick="reverseGeocode()" type="button"/>
    </h:panelGrid>
    
    <p:gmap id="revGeoGmap" widgetVar="revGeoMap" center="#{geocodeView.centerRevGeoMap}" zoom="2" type="ROADMAP" model="#{geocodeView.revGeoModel}" style="width:100%;height:400px">
        <p:ajax event="reverseGeocode" listener="#{geocodeView.onReverseGeocode}" update="@this" />
    </p:gmap>

</h:form>