Integrating Google Maps with ADF - Search using Address

The blog post written by James Taylor has sample code to search Google maps based on Longitude & Latitude. Here I am going to share code snippet to search Google maps API service based on Address/City/Zip code.

Add following changes to existing application discussed in blog post:

Note: Following changes tested with ADF v11.1.2.3.0 and Google Maps API V3.

1. Update existing Java Script section as follows:

    <f:facet name="metaContainer">
           <af:resource type="javascript" source="https://www.google.com/jsapi?key=[API Access Key]"/>
           <af:resource type="javascript">
                    google.load("maps", "3",  {other_params:"sensor=false"});
                    var map;
                    var geocoder;
                    function initialize()
                    {
                     geocoder = new google.maps.Geocoder();
                     var myLatlng = new google.maps.LatLng(-34.397, 150.644);
                     var myOptions = {
                                      zoom: 8,
                                      center: myLatlng,
                                      mapTypeId: google.maps.MapTypeId.ROADMAP
                                     }
                     map = new google.maps.Map(document.getElementById("map"), myOptions);
                    }
                    google.setOnLoadCallback(initialize);                  
            </af:resource>
            <af:resource type="javascript">
                        function codeAddress(evt)
                           {
                            var str = [];
                            str[0] = evt.getSource().getProperty("str");
                            str[1] = evt.getSource().getProperty("city");
                            str[2] = evt.getSource().getProperty("zip");
                            var address = str.join(',');
                            geocoder.geocode( { 'address': address}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK)
                            {
                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker(
                                    {
                                    map: map,
                                    position: results[0].geometry.location
                                    }
                                );
                            } else {
                                alert('Geocode was not successful for the following reason: ' + status);
                            }
                            });
                        }
            </af:resource>
      </f:facet>

2. Implement Client Listeners for user interaction as mentioned below.

Find the code:
                                <af:outputText value="#{row.Zip}" id="ot2">
                                    <af:convertNumber groupingUsed="false"
                                                      pattern="#{bindings.HousesUVO1.hints.Zip.format}"/>
                                </af:outputText>

And replace it to look like this.
                                <af:outputText value="#{row.Zip}" id="ot2">
                                    <af:convertNumber groupingUsed="false"
                                                      pattern="#{bindings.HousesUVO1.hints.Zip.format}"/>
                                    <af:clientAttribute name="str" value="#{row.Street}"/>
                                    <af:clientAttribute name="city" value="#{row.City}"/>
                                    <af:clientAttribute name="zip" value="#{row.Zip}"/>
                                    <af:clientListener method="codeAddress" type="click"/>                                                      
                                </af:outputText>

Finally run the page and click on any Zip code in Zip column to see the respective address on the Map region.