cf_gMap

Author
Scott Bennett (www.ColdFusionGuy.com)

Description

Generates and displays an interactive, Google API powered map. To add markers to the map, use the cf_gMapMarker tag.

Syntax

<cf_gMap
  GoogleAPIKey="Google API Key"
  Latitude="latitude"
  Longitude="longitude"
  ZoomLevel="integer"
  MapControl="large|small|zoom|none"
  ScaleControl="true|false"
  MapTypeControl="true|false"
  OverviewMapControl="true|false"
  style="style specification"
  id="HTML id"
  />

See also

cf_gMapMarker

Attributes

Attribute Req/Opt Default Description

GoogleAPIKey Required The Google API key that is assigned to your domain. To obtain a Google API key for your domain, click here.

Latitude Required if Longitude is specified 0 The Latitude of the location you want the map to be centered on. Ignored if Longitude is not specified.

Longitude Required if Latitude is specified 0 The Longitude of the location you want the map to be centered on. Ignored if Latitude is not specified.

ZoomLevel Optional 1 The zoom level. Fully zoomed-out is level 0, increasing the zoom level causes the map to be zoomed-in closer.

MapControl Optional false Specifies the pan/zoom control to appear in the upper left corner of the Google Map. Optional values are:

Large - a large pan/zoom control

Small - a smaller pan/zoom control

Zoom - a small zoom control (no panning controls)

None - no pan/zoom contols

ScaleControl Optional false If set to true, a map scale will appear in the lower left corner of the Google Map

MapTypeControl Optional false If set to true, buttons that let the user toggle between map types (such as Map and Satellite) will appear on the Google Map

OverviewMapControl Optional false If set to true, a collapsible overview map will appear in the lower right corner of the Google Map

style Optional width: 500px; height: 300px A style specification in CSS format that will be used in the DIV that will contain the Google map.

id Optional map_canvas The HTML ID that will be assigned to the DIV that will contain the Google map.

Attribute	Req/Opt	Default	Description
GoogleAPIKey	Required		The Google API key that is assigned to your domain. To obtain a Google API key for your domain, click here.
Latitude	Required if Longitude is specified	0	The Latitude of the location you want the map to be centered on. Ignored if Longitude is not specified.
Longitude	Required if Latitude is specified	0	The Longitude of the location you want the map to be centered on. Ignored if Latitude is not specified.
ZoomLevel	Optional	1	The zoom level. Fully zoomed-out is level 0, increasing the zoom level causes the map to be zoomed-in closer.
MapControl	Optional	false	Specifies the pan/zoom control to appear in the upper left corner of the Google Map. Optional values are: Large - a large pan/zoom control Small - a smaller pan/zoom control Zoom - a small zoom control (no panning controls) None - no pan/zoom contols
ScaleControl	Optional	false	If set to true, a map scale will appear in the lower left corner of the Google Map
MapTypeControl	Optional	false	If set to true, buttons that let the user toggle between map types (such as Map and Satellite) will appear on the Google Map
OverviewMapControl	Optional	false	If set to true, a collapsible overview map will appear in the lower right corner of the Google Map
style	Optional	width: 500px; height: 300px	A style specification in CSS format that will be used in the DIV that will contain the Google map.
id	Optional	map_canvas	The HTML ID that will be assigned to the DIV that will contain the Google map.

Example

<cf_gMap
  GoogleAPIKey="ABQIAAAAhugggN57hOQoaz39FnjmlBRMVK3x6ViLOtpAWN1mSgg089OO2BSUk4STpxPKlccsguU0Dvqet9F3Xw"
  Latitude="33.840000"
  Longitude="-117.950000"
  ZoomLevel="10"
  MapControl="large"
  ScaleControl=true
  MapTypeControl=true
  OverviewMapControl=true
  />