ReadabilityCreating multiple markers on a map using the CFMAPITEM tag in ColdFusion 9
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.
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:
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:
And the external .XML file, items.xml, is as follows:
Or, you could load a remote .XML file using the <CFHTTP> tag, as seen in the following example:
Or, you could display addresses from a database query, as seen in the following 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> |
<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> |
<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> |
<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> |
<?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> |
<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> |
<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>
Hi, for some reason I canot get my dynamic google map to output, any suggestions would be greaty welcomed, here is my code: