HI All,
I am currently working on a project that involves integrating a google maps places search box in adf. I have had a go at it and realised the search box works perfectly if placed directly in . Unfortunately i haven't been able to get it to work within an <af:popup>. Are there any suggestions on how to get this to work? Kindly find my code below and images(red arrow and searchbox text) attached. I am currently using an html <input> element as this is what is recommended to make the autocomplete work.
Please note that i have imported necessary google maps resources and this works perfectly if not within a popup
ADF code
<af:popup childCreation="deferred" autoCancel="disabled" contentDelivery="lazyUncached"
id="popupManageDevices" binding="#{regionMapHandler.popupGMapsDisplay}">
<af:clientListener type="popupOpening" method="loadMap"/>
<af:serverListener type="loadGoogleMapFromDatabase" method="#{regionMapHandler.fetchGoogleMap}"/>
<af:serverListener type="logOrdinatesForBoundary"
method="#{regionMapHandler.logOrdinatesForRegionBoundary}"/>
<af:serverListener type="logCoordinatesForMidpoint"
method="#{regionMapHandler.logCoordinatesForMidpoint}"/>
<af:dialog id="d4" inlineStyle="width:700px; height:630px;" title="Manage Region Boundary"
type="cancel" clientComponent="true" styleClass="customDialog"
titleIconSource="/images/earth.png">
<af:toolbar id="t1">
<af:button text="Refresh Map" id="b1" clientComponent="true"/>
<af:button text="Update Boundary" id="b2"
actionListener="#{regionMapHandler.onUpdateBoundaryButtonClick}"
clientComponent="true">
<af:clientListener method="loadMap" type="click"/>
<af:serverListener type="loadGoogleMapFromDatabase"
method="#{regionMapHandler.fetchGoogleMap}"/>
<af:serverListener type="logOrdinatesForBoundary"
method="#{regionMapHandler.logOrdinatesForRegionBoundary}"/>
<af:serverListener type="logCoordinatesForMidpoint"
method="#{regionMapHandler.logCoordinatesForMidpoint}"/>
</af:button>
<af:button text="Delete Boundary" id="b4"
actionListener="#{regionMapHandler.onDeleteRegionBoundary}"
clientComponent="true">
<af:clientListener method="loadMap" type="click"/>
<af:serverListener type="loadGoogleMapFromDatabase"
method="#{regionMapHandler.fetchGoogleMap}"/>
<af:serverListener type="logOrdinatesForBoundary"
method="#{regionMapHandler.logOrdinatesForRegionBoundary}"/>
<af:serverListener type="logCoordinatesForMidpoint"
method="#{regionMapHandler.logCoordinatesForMidpoint}"/>
</af:button>
<af:button text="Add Device" id="b5" clientComponent="true"
actionListener="#{regionMapHandler.onRegisterNewDeviceForRegion}">
<af:clientListener method="loadMap" type="click"/>
<af:serverListener type="loadGoogleMapFromDatabase"
method="#{regionMapHandler.fetchGoogleMap}"/>
<af:serverListener type="logOrdinatesForBoundary"
method="#{regionMapHandler.logOrdinatesForRegionBoundary}"/>
<af:serverListener type="logCoordinatesForMidpoint"
method="#{regionMapHandler.logCoordinatesForMidpoint}"/>
</af:button>
<af:button text="Delete Device" id="b6" clientComponent="true">
<af:clientListener method="deleteDeviceJS" type="click"/>
<af:serverListener type="deleteDeviceADF" method="#{regionMapHandler.deleteDevice}"/>
<af:clientListener method="loadMap" type="click"/>
<af:serverListener type="loadGoogleMapFromDatabase"
method="#{regionMapHandler.fetchGoogleMap}"/>
<af:serverListener type="logOrdinatesForBoundary"
method="#{regionMapHandler.logOrdinatesForRegionBoundary}"/>
<af:serverListener type="logCoordinatesForMidpoint"
method="#{regionMapHandler.logCoordinatesForMidpoint}"/>
</af:button>
</af:toolbar>
<af:panelGroupLayout id="pgl2" layout="vertical">
<div>
<input type="text" id="test" placeholder="Search..." onfocus="cleartext()"/>
</div>
<div id="googleMap" style="width:100%;height:480px;margin-top:1px;border: 1px solid black;"
xmlns="http://www.w3.org/1999/xhtml"> </div>
</af:panelGroupLayout>
<f:facet name="buttonBar"></f:facet>
</af:dialog>
</af:popup>
Javascript code
function cleartext() {
var zoomAutocomplete = new google.maps.places.Autocomplete(document.getElementById('test'));
}