|
cfmap
DescriptionEmbeds
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 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
Syntax<cfmap
centeraddress="address"
centerlatitude="latitude in degrees"
centerlongitude="longitude in degrees"
collapsible="true|false"
continuouszoom="true|false"
doubleclickzoom="true|false"
height="integer"
hideborder=""
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"
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>
HistoryColdFusion
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.
|
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.
|
collapsible
|
Optional
|
false
|
Whether to provide a collapsible property
for the surrounding panel:
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:
|
doubleclickzoom
|
Optional
|
true
|
Whether to enable double-click zoom:
|
height
|
Optional
|
400 pixels
|
Height of the map, in pixels.
|
hideborder
|
Optional
|
true
|
Whether to hide border for surrounding panel:
If you set hideborder to
true, you cannot set collapsible to true.
|
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
|
|
Indicates the color of the marker. Specify
a string value, for example "black", "red", or "green".
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:
|
|
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.
|
scrollwheelzoom
|
Optional
|
true
|
Whether to enable mouse wheel zooming control:
|
showallmarkers
|
Optional
|
true
|
Whether to display all markers added to
the map:
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:
|
showscale
|
Optional
|
false
|
Whether to show scale control:
|
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
|
|
typecontrol
|
Optional
|
basic
|
Whether to provide a type control that lets
you switch the map: basic: Displays a
drop-down list 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.
|
UsageThis
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 zoomcontrolattribute
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"/>
|