Changing the center point at runtime on a Google Map using the CFMAP tag and ColdFusion

Readability

Changing the center point at runtime on a Google Map using the CFMAP tag and ColdFusion

The fol­low­ing exam­ple shows how you can 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.





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

For an exam­ple of dynam­i­cally set­ting the cen­ter point on a map from a latitude/​longitude instead of a street address, see “Con­vert­ing an address to a latitude/​longitude using JavaScript the CFMAP tag in Cold­Fu­sion”.

The following example shows how you can change the center address on a <CFMAP> tag at runtime using JavaScript and ColdFusion by calling the ColdFusion.Map.setCenter() function.

<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
 
<script type="text/javascript">
    function centerMap(addr) {
        ColdFusion.Map.setCenter('map01', {address:addr});
    }
</script>
 
<div style="background-color:#EEEEEE; padding:5px;">
    <input id="address" type="text" />
    <input type="button" value="Submit" onclick="centerMap(getElementById('address').value);">
</div>
 
<cfmap name="map01"
        centerAddress="Hawaii"
        zoomLevel="7" />

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

For an example of dynamically setting the center point on a map from a latitude/longitude instead of a street address, see “Converting an address to a latitude/longitude using JavaScript the CFMAP tag in ColdFusion”.

Leave a Reply

Your email address will not be published.