PrimeFaces Extensions Showcase

InputPlace

Link the InputPlace to a Google Map implementaton to control the map. DO NOT FORGET TO INCLUDE <script> with your Google API Key.

Source

XHTML page
Managed bean


                    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&amp;libraries=places" />

    <script>
        function updateMap(place) {
            const map = PF('googleMap').getMap();
            if (!map || !place.geometry) {
                return;
            }

            // drop a pin
            const marker = new google.maps.Marker({
                map,
                position: place.geometry.location,
            });

            // If the place has a geometry, then present it on a map.
            map.panTo(place.geometry.location);
            map.setZoom(17);
        }
    </script>

    <p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false">
        <p:autoUpdate/>
    </p:growl>

    <div jsf:id="inputGroup" class="field grid">
        <div class="col-12">
            <div class="ui-inputgroup mb-4">
                <div class="ui-inputgroup-addon"><i class="fa-solid fa-location-dot"></i></div>
                <pe:inputPlace widgetVar="place" placeholder="Enter a location" styleClass="w-full" onplacechanged="updateMap(place)" />
            </div>
        </div>
        <div class="col-12">
            <p:gmap widgetVar="googleMap" center="41.381542, 2.122893" zoom="15" type="ROADMAP" style="width:100%;height:400px" />
        </div>
    </div>


                    @Named
@ViewScoped
public class BasicInputPlaceController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String input;
    private Place selectedPlace;
    private String azureApiKey;

    public void submit() {
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Place", input));
    }

    public void onPlaceChanged(final SelectEvent<Place> event) {
        this.selectedPlace = event.getObject();
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected Place", selectedPlace.toString()));
    }

    public String getInput() {
        return input;
    }

    public void setInput(String input) {
        this.input = input;
    }

    public Place getSelectedPlace() {
        return selectedPlace;
    }

    public void setSelectedPlace(Place selectedPlace) {
        this.selectedPlace = selectedPlace;
    }

    public String getAzureApiKey() {
        return azureApiKey;
    }

    public void setAzureApiKey(String azureApiKey) {
        this.azureApiKey = azureApiKey;
    }
}