User Guide Cancel

cfmap

Last updated on May 30, 2024 | Also applies to ColdFusion

CFML Reference User Guide
ColdFusion functions
ColdFusion Tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcol
    5. cfcontent
    6. cfdocument
    7. cfdocumentitem
    8. cfdocumentsection
    9. cfflush
    10. cfheader
    11. cflog
    12. cfoutput
    13. cfpresentation
    14. cfpresentationslide
    15. cfpresenter
    16. cfprocessingdirective
    17. cfprint
    18. cfreport
    19. cfreportparam
    20. cfsilent
    21. cftable
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
  1. cfcache
  2. cfcalendar
  3. cfcase
  4. cfcatch
  5. cfchart
  6. cfchartdata
  7. cfchartseries
  8. cfclient
  9. cfclientsettings
  10. cfcol
  11. cfcollection
  12. cfcomponent
  13. cfcontent
  14. cfcontinue
  15. cfcookie
  16. Tags d-e
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Description

Embeds a geographical map within a ColdFusion web page.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 cfajaximporttag. 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

Syntax

<cfmap 
centeraddress="address" 
centerlatitude="latitude in degrees" 
centerlongitude="longitude in degrees" 
collapsible="true|false" 
continuouszoom="true|false" 
doubleclickzoom="true|false" 
height="integer" 
hideborder="true|false" 
initshow="true|false" 
markerbind="bind expression" 
markercolor="marker color" 
markericon="icon path " 
markerwindowcontent="content" 
name="name" 
onerror="JavaScript function name" 
onload="JavaScript function name" 
overview="true|false" 
scrollwheelzoom="true|false" 
showallmarkers="true|false" 
showcentermarker="true|false" 
showmarkerwinodw="true|false" 
showscale="true|false" 
showUser="true|false" 
tip="center property marker tips" 
title="string" 
type="map|satellite|hybrid|earth|terrain" 
typecontrol="none|basic|advanced" 
width="integer" 
zoomcontrol="none|small|large|small3d|large3d" 
zoomlevel="integer"> 
</cfmap>

History

ColdFusion 10: Added the attribute showUser}}

ColdFusion 9.0.1: Added the attribute {{initShow.

ColdFusion 9: Added this tag.

Attributes

Attribute	Req/Opt	Default	Description
centeraddress	Required if centerlatitude and centerlongitude are not specified		The address of the location, which is set as the center of the map.
centerlatitude	Required if centeraddress is not specified		The latitude value for the location, in degrees. This value is set as the center of the map. This attribute must be used with the centerlatitude attribute. The valid values for centerlatitude are -90 to + 90
centerlongitude	Required if centeraddress is not specified		The longitude value for the location, in degrees. This value is set as the center of the map. This attribute must be used with the centerlongitude attribute. The valid values for centerlongitude are -180 to +180.
collapsible	Optional	false	Whether to provide a collapsible property for the surrounding panel: true false If you set collapsible to true, you cannot set hideborders to true.
continuouszoom	Optional	true	Whether to provide zoom control that enables smooth zooming for the map: true false
doubleclickzoom	Optional	true	Whether to enable double-click zoom: true false
height	Optional	400 pixels	Height of the map, in pixels.
hideborder	Optional	true	Whether to hide border for surrounding panel: true false If you set hideborder to true, you cannot set collapsible to true.
initshow	Optional	true	Use to show/hide a map when the page loads. This is useful if you have collapsible divs or collapsible spry regions, where the user has to show the map on click of a link or button
markerbind	Optional		A bind expression to dynamically populate data in the window that is opened when you click the marker icon. The bind expression can specify a CFC function, a JavaScript function, or a URL.
markercolor	Optional		The color of the marker specified as a hexadecimal value. By default, the centermarker is green in color. The attributes markericon and markercolor are mutually exclusive.
markericon	Optional		Location of an image file to use as the marker icon. The attributes markericon and markercolor are mutually exclusive.
markerwindowcontent	Optional		Static content displayed in the marker window. This attribute is mutually exclusive with the markerbind attribute.
name	Required		Name of the map. The name attribute is required to invoke JavaScript functions.
onerror	Optional		The JavaScript function to run when there is a Google map API error. The JavaScript function is passed with two parameters, Google map status code and error message.
onload	Optional		Custom JavaScript function that runs after the map loads, for instance, registering an event.
overview	Optional	false	Whether to add an Overview panel to the map: true false
showmarkerwindow	Optional	false	If set to true, displays the marker window. If the attribute markerbind is used, unless you set this attribute to true, the marker window is not displayed. This attribute is ignored if markerwindowcontent is set to true.
showUser	Optional	false	If set to true, on HTML-compliant browsers, user location is shown on the map. For browsers that are not HTML 5 compliant, the address falls back to the value you specify for centerAddress. If no value is specified, it falls back to the value specified for centerLatitude and centerLongitude. User has to authenticate the site so that it tracks user location. For example, in Google Chrome, you are prompted to Allow to track your Physical location.
scrollwheelzoom	Optional	true	Whether to enable mouse wheel zooming control: true false
showallmarkers	Optional	true	Whether to display all markers added to the map: true false When you specify showallmarkers as true, to display all the markers within the map area, the zoom level specified for the map may be overridden.
showcentermarker	Optional	true	Whether to display the marker icon that identifies the map center: true false
showscale	Optional	false	Whether to show scale control: true false
tip	Optional		A short description of the center location that appears as a tool tip.
title	Optional		Title of the panel. You cannot define a title, if you set hideborder to true.
type	Optional	map	Type of the Google map: map satellite hybrid terrain earth: If you use type="earth", you are prompted to download Google Earth 3D plug-in.
typecontrol	Optional	basic	Whether to provide a type control that lets you switch the map: basic: Displays the marker types that provides the options map, satellite, and hybrid. none advanced: Displays a drop-down list with five options defined for the attribute type.
width	Optional	400 pixels	Map width, in pixels.
zoomcontrol	Optional	small	Whether to enable zoom control: none small large large3d small3d
zoomlevel	Optional	3	Specifies the starting zoom value.

Usage

This tag can be used to create a map within an HTML page, a div tag, or in a new window. If you use this tag in a new window, you must use the cfmap tag within the cfwindow tag.
The {{zoomcontrol}}attribute lets you change the size of the embedded map. You can increase the zoom value to get a close-up view of the map. Or, decrease the zoom value to view a larger area of the map at a reduced size. Each time you change the zoom value, the entire map does not refresh, but only those portions of the map that change, making the display of data fast.
The cfmap tag supports the map display in five formats - map, satellite, terrain, earth, and hybrid. The map format displays a standard road map image. The satellite format displays a satellite image of the map. The hybrid format displays a combination of the roadmap and the satellite image of the map, with important street names and places marked on the satellite image.
The following attributes do not work if type="earth": Zoomlevel, showScale, overview, tip, zoomControl, showCenterMarker, and showAllMarkers.
For cfmap tag to work on Safari 3.x and Google Chrome, specify the HTML head tag (<head></head>).

Examples

<h3>cfmap Example using latitude and longitude attributes</h3> 
<cfmap name="gmap01" 
centerlatitude="71.094224" 
centerlongitude="42.339641" 
doubleclickzoom="true" 
overview="true" 
scrollwheelzoom="true" 
showscale="true" 
tip="My Map" 
zoomlevel="4"/>

<h3>cfmap Example using center address</h3> 
<cfmap name="gmap02" 
centeraddress="345 Park Avenue, san jose, CA 95110-2704, USA" 
doubleclickzoom="true" 
scrollwheelzoom="true" 
showscale="false" 
tip="My Map"/>

Get help faster and easier

New user?

cfmap

Description

Category