cfmap

Search

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

Category

Display management tags

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>

See also

cfdiv, cfwindow, cfmapitem

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"/>
Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy