CFFILE, CFHTTP, CFMAP, CFMAPITEM, CFXML

Creating multiple markers on a map using the CFMAPITEM tag in ColdFusion 9

1 Comment
Readability

Creating multiple markers on a map using the CFMAPITEM tag in ColdFusion 9

In a pre­vi­ous exam­ple, “Embed­ding a Google Map using the CFMAP tag in Cold­Fu­sion 9″, we saw how you could embed a Google map in Cold­Fu­sion 9 using the <CFMAP> tag.

The fol­low­ing exam­ple show how you can cre­ate mul­ti­ple mark­ers on a Google map in Cold­Fu­sion 9 using the <CFMAPITEM> tag.

Click here to sign up for the Google Maps API.

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

You could also cre­ate <CFMAPITEM> objects from an XML vari­able using the <CFXML> tag, as seen in the fol­low­ing example:

Or, if you have an XML file on your server, you could load an exter­nal .XML file using the <CFFILE> tag, as seen in the fol­low­ing example:

And the exter­nal .XML file, items.xml, is as follows:

Or, you could load a remote .XML file using the <CFHTTP> tag, as seen in the fol­low­ing example:

Or, you could dis­play addresses from a data­base query, as seen in the fol­low­ing example:


    SELECT *
    FROM ORDERS

In a previous example, “Embedding a Google Map using the CFMAP tag in ColdFusion 9”, we saw how you could embed a Google map in ColdFusion 9 using the <CFMAP> tag.

The following example show how you can create multiple markers on a Google map in ColdFusion 9 using the <CFMAPITEM> tag.

Click here to sign up for the Google Maps API.

<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
<cfmap name="gmap01"
        centerAddress="345 Park Avenue, San Jose, CA 95110-2704"
        tip="Corporate headquarters">
 
    <cfmapitem name="SanFrancisco" 
            address="601 Townsend Street, San Francisco, CA 94103" 
            tip="San Francisco office" /> 
    <cfmapitem name="Seattle" 
            address="801 N. 34th Street, Seattle, WA 98103" 
            tip="Seattle office" />
    <cfmapitem name="Boston" 
            address="21 Hickory Drive, Waltham, MA 02451" 
            tip="Boston office" />
    <cfmapitem name="Utah" 
            address="550 East Timpanogos Circle, Orem, UT 84097" 
            tip="Utah office"/>
 
</cfmap>

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

You could also create <CFMAPITEM> objects from an XML variable using the <CFXML> tag, as seen in the following example:

<cfxml variable="itemsXML">
    <items>
        <item name="SanFrancisco" 
                address="601 Townsend Street, San Francisco, CA 94103" 
                tip="San Francisco office" /> 
        <item name="Seattle" 
                address="801 N. 34th Street, Seattle, WA 98103" 
                tip="Seattle office" />
        <item name="Boston" 
                address="21 Hickory Drive, Waltham, MA 02451" 
                tip="Boston office" />
        <item name="Utah" 
                address="550 East Timpanogos Circle, Orem, UT 84097" 
                tip="Utah office"/>
    </items>
</cfxml>
 
<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
<cfmap name="gmap01"
        centerAddress="345 Park Avenue, San Jose, CA 95110-2704"
        tip="Corporate headquarters">
    <cfloop array="#itemsXML.items.xmlChildren#" index="foo">
        <cfmapitem name="#foo.xmlAttributes.name#" address="#foo.xmlAttributes.address#" tip="#foo.xmlAttributes.tip#" />
    </cfloop>
</cfmap>

Or, if you have an XML file on your server, you could load an external .XML file using the <CFFILE> tag, as seen in the following example:

<cffile action="read" file="#expandPath('items.xml')#" variable="itemsXML" />
<cfset itemsXML = xmlParse(itemsXML) />
 
<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
<cfmap name="gmap01"
        centerAddress="345 Park Avenue, San Jose, CA 95110-2704"
        tip="Corporate headquarters">
    <cfloop array="#itemsXML.items.xmlChildren#" index="foo">
        <cfmapitem name="#foo.xmlAttributes.name#" address="#foo.xmlAttributes.address#" tip="#foo.xmlAttributes.tip#" />
    </cfloop>
</cfmap>

And the external .XML file, items.xml, is as follows:

<?xml version='1.0' encoding='utf-8' ?>
<!-- items.xml -->
<items>
    <item name="SanFrancisco" 
            address="601 Townsend Street, San Francisco, CA 94103" 
            tip="San Francisco office" /> 
    <item name="Seattle" 
            address="801 N. 34th Street, Seattle, WA 98103" 
            tip="Seattle office" />
    <item name="Boston" 
            address="21 Hickory Drive, Waltham, MA 02451" 
            tip="Boston office" />
    <item name="Utah" 
            address="550 East Timpanogos Circle, Orem, UT 84097" 
            tip="Utah office"/>
</items>

Or, you could load a remote .XML file using the <CFHTTP> tag, as seen in the following example:

<cfhttp url="http://localhost:8500/cfexamples/items.xml" method="GET" />
<cfset itemsXML = xmlParse(CFHTTP.fileContent) />
 
<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
<cfmap name="gmap01"
        centerAddress="345 Park Avenue, San Jose, CA 95110-2704"
        tip="Corporate headquarters">
    <cfloop array="#itemsXML.items.xmlChildren#" index="foo">
        <cfmapitem name="#foo.xmlAttributes.name#" address="#foo.xmlAttributes.address#" tip="#foo.xmlAttributes.tip#" />
    </cfloop>
</cfmap>

Or, you could display addresses from a database query, as seen in the following example:

<cfquery name="getOrders" datasource="cfartgallery">
    SELECT *
    FROM ORDERS
</cfquery>
 
<cfajaximport params="#{googlemapkey='YourGoogleMapsAPIKeyHere'}#" />
<cfmap name="gmap01"
        centerAddress="345 Park Avenue, San Jose, CA 95110-2704"
        tip="Corporate headquarters">
    <cfloop query="getOrders">
        <cfmapitem name="#getOrders.CUSTOMERLASTNAME#, #getOrders.CUSTOMERFIRSTNAME#" address="#getOrders.ADDRESS#, #getOrders.CITY#, #getOrders.STATE# #getOrders.POSTALCODE#" tip="#dateFormat(getOrders.ORDERDATE)#" />
    </cfloop>
</cfmap>

One thought on “Creating multiple markers on a map using the CFMAPITEM tag in ColdFusion 9”

Leave a Reply

Your email address will not be published.