Using geographical maps

The cfmap tag lets you embed a geographical map within your ColdFusion page. The following are the supported map types:

earth
terrain
satellite
hybrid
map (default)

Using the marker window

The marker window opens when you click the marker icon in the map. It is used to provide information pertaining to the locations in the map, for example address or latitude and longitude. The marker window can be populated with static or dynamic content.

Populating data using static content

To manually populate data in the marker window, specify the value in the markerwindowcontent attribute.

Populating dynamic data using bind expression

To dynamically populate data, use the markerbind attribute with a bind expression that calls a CFC, JavaScript function, or a URL. The bind expression uses bind parameters to specify dynamic information and the values of any other form field attributes.
Pass the bind parameters to the bind expression. If you omit any of the parameters in the function call or URL, you get an error. These parameters send information about the map and its state to the data provider function. The data for these parameters is provided automatically. You do not set any values manually.
Provide the data as provided in the following code:

<br>
<cfoutput>
<table>
<tr>
<td bgcolor='red'><h4><font color='white'>URL Bind Example</font></td>
</tr>
</table>
Map Name: #cfmapname#<br>
Latitude, Longitude: (#DecimalFormat(cfmaplatitude)#,#DecimalFormat(cfmaplongitude)#)<br>
Address: #cfmapaddress#<br>
</cfoutput>

The following table provides details of the parameters:

Parameter name	Description
cfmapname	The name of the map.
cfmaplatitude	The latitude value for the location, in degrees. This value is set as the center of the map.
cfmaplongitude	The longitude value for the location, in degrees. This value is set as the center of the map.
cfmapaddress	The address of the location, which is set as the center of the map.

The format of the returned data depends on how you get the data:

Bind type	Return value
CFC	A ColdFusion structure. ColdFusion automatically converts the structure for return to the caller. Alternatively, you can return a JSON representation of the structure.
URL	A JSON representation of a structure. No other body contents is allowed.
JavaScript	A JavaScript object.

Use the showmarkerwindow attribute to control the display of the window.
The following example uses a bind expression and a CFC to populate dynamic data using a CFC bind expression. The CFML page contains the following:

The map.cfc is as follows:

<cfcomponent>
<cffunction name="getMapData" access="remote">
<cfargument name="cfmapname">
<cfargument name="cfmaplatitude">
<cfargument name="cfmaplongitude">
<cfargument name="cfmapaddress">
<cfsavecontent variable="markup">
<br>
<cfoutput>
<table>
<tr>
<td bgcolor='red'><h4><font color='white'>CFC Bind Example</font></td>
</tr>
</table>
Map Name: #cfmapname#<br>
Latitude, Longitude: (#DecimalFormat(cfmaplatitude)#,#DecimalFormat(cfmaplongitude)#)<br>
Address: #cfmapaddress#<br>
</cfoutput>
</cfsavecontent>
<cfreturn markup>
</cffunction>
</cfcomponent>

The following example shows how to populate dynamic data using a JavaScript bind expression:

The following example shows how to populate dynamic data using a URL bind expression:

Specifying Google map key

The Google Maps API key is required to embed Google Maps in your web pages.
The following URL provides details of how to sign up for the Google Maps API key:
http://code.google.com/apis/maps/signup.html
Currently, ColdFusion supports only embedding of Google map. To generate a map, provide a valid Google map API key, and specify the latitude and longitude of the location, or the address of the location. The Google map API key can be specified in the following ways:

Using the cfajaximport tag. You specify the map API key in the params attribute as follows:<cfajaximport params="#{googlemapkey='Map API Key'}#"
Using Application.cfc as follows:<cfset this.googlemapkey="Map API Key">
Using the Settings page in the ColdFusion Administrator. Specify the map API key in the Google Map Key field. You can also specify the map API key in runtime.cfc.

Styling markers

You can specify the following:

Custom marker icon: Specify the path to the icon using the markericon attribute. Ensure that you specify an image of appropriate size.
Marker icon color: Use the markercolor attribute. You can specify a color of your preference only for the default icon and not for others.
Map title: Use the title attribute.

Get help faster and easier

New user?