Converting an address to a latitude/longitude using JavaScript the CFMAP tag in ColdFusion

Readability

Converting an address to a latitude/longitude using JavaScript the CFMAP tag in ColdFusion

In a pre­vi­ous exam­ple, “Chang­ing the cen­ter point at run­time on a Google Map using the CFMAP tag and Cold­Fu­sion”, we saw how you could change the cen­ter address on a <CFMAP> tag at run­time using JavaScript and Cold­Fu­sion by call­ing the ColdFusion.Map.setCenter() function.

The fol­low­ing exam­ple shows how you can con­vert an address to a lat­i­tude and lon­gi­tude using JavaScript and the <CFMAP> tag in Cold­Fu­sion by call­ing the ColdFusion.Map.getLatitudeLongitude() function.





And the out­put of the <CFMAP> tag is as fol­lows:

In a previous example, “Changing the center point at runtime on a Google Map using the CFMAP tag and ColdFusion”, we saw how you could change the center address on a <CFMAP> tag at runtime using JavaScript and ColdFusion by calling the ColdFusion.Map.setCenter() function.

The following example shows how you can convert an address to a latitude and longitude using JavaScript and the <CFMAP> tag in ColdFusion by calling the ColdFusion.Map.getLatitudeLongitude() function.

<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
 
<script type="text/javascript">
    function centerMap(addr) {
        ColdFusion.Map.getLatitudeLongitude(addr, getLatLngCallback);
    }
 
    function getLatLngCallback(result) {
        var center = {latitude: result.lat(), longitude: result.lng()}; 
 
        ColdFusion.Map.setCenter("map01", center);
        debug.value += "-- " + address.value + " --\n" +
                "latitude: " + result.lat() + "\n" +
                "longitude: " + result.lng() + "\n\n";
    }
</script>
 
<div style="background-color:#EEEEEE; padding:5px; width:390px;">
    <input id="address" type="text" />
    <input type="button" value="Submit" onclick="centerMap(address.value);">
</div>
 
<cfmap name="map01"
        centerAddress="Hawaii"
        zoomLevel="7" />
 
<textarea id="debug" rows="10" cols="40"></textarea>

And the output of the <CFMAP> tag is as follows:

Leave a Reply

Your email address will not be published.