Using geographical maps

Search
ColdFusion

ColdFusion

Open app

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:

<br>
<cfmap
centeraddress="Hobart, Tasmania, Australia"
name="map1"
type="map"
tip="Hobart, Tasmania, Australia"
zoomControl="small3d"
markerbind="cfc:maps.getMapData({cfmapname}, {cfmaplatitude}, {cfmaplongitude}, {cfmapaddress})"
showmarkerwindow = true>
<cfmapitem name="m1" address="Taj Mahal, Agra, India" tip="Taj Mahal, Agra, India">
<cfmapitem name="m2" latitude="40.46" longitude="117.05" showmarkerwindow=true tip="Great Wall of China, Bejing">
<cfmapitem name="m3" address="Stonehenge, England" tip="Stonehenge, England" showmarkerwindow = false>
</cfmap>

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:

<script language="JavaScript">
var getMapData = function(cfmapname, cfmaplatitude, cfmaplongitude, cfmapaddress){
var msg = "";
msg = msg + "Map Name: " + cfmapname + "<br>";
msg = msg + "Latitude,longitude: " + "(" + cfmaplatitude + "," + cfmaplongitude + ")" + "<br>";
msg = msg + "Address: " + cfmapaddress + "<br>";
//alert(msg);
return "<br><table><tr><td bgcolor='red'><h4><font color='white'>" + "Javascript Bind Example" + "</font></td></tr></table><hr>" + msg;
}
</script>
<cfmap
centeraddress="Hobart, Tasmania, Australia"
name="map1"
type="map"
tip="Hobart, Tasmania, Australia"
zoomControl="small3d"
markerbind="javascript:getMapData({cfmapname}, {cfmaplatitude}, {cfmaplongitude}, {cfmapaddress})"
showmarkerwindow = true>
<cfmapitem name="m1" address="Taj Mahal, Agra, India" tip="Taj Mahal, Agra, India">
<cfmapitem name="m2" latitude="40.46" longitude="117.05" showmarkerwindow=true tip="Great Wall of China, Bejing">
<cfmapitem name="m3" address="Stonehenge, England" tip="Stonehenge, England" showmarkerwindow = false>
</cfmap>

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

<cfmap
centeraddress="Hobart, Tasmania, Australia"
name="map1"
type="map"
tip="Hobart, Tasmania, Australia"
zoomControl="small3d"
markerbind="url:mapdata.cfm?cfmapname={cfmapname}&cfmaplatitude={cfmaplatitude}&cfmaplongitude={cfmaplongitude}&cfmapaddress={cfmapaddress}"
showmarkerwindow = true >
<cfmapitem name="m1" address="Taj Mahal, Agra, India" tip="Taj Mahal, Agra, India">
<cfmapitem name="m2" latitude="40.46" longitude="117.05" showmarkerwindow=true tip="Great Wall of China, Bejing">
<cfmapitem name="m3" address="Stonehenge, England" tip="Stonehenge, England" showmarkerwindow = false>
</cfmap>

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.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy