cf_googleMap Documentation

window.load = GM_resetMapBasedOnUserAction();

Table of Contents

1. Overview
2. Tag Attributes
   • CF_GoogleMap
   • CF_GoogleMapIcon
   • CF_GoogleMapLine
   • CF_GoogleMapPoint
   • CF_GoogleMapShow
3. JavaScript API
   • GM_viewProperty
   • GM_createMarker
   • GM_clearMap
4. Examples
   1. Creating a basic map
   2. Using Custom Icons
   3. Drawing Lines on the Map
   4. Create custom content for the information windows
   5. Directions
   6. Directions To / From
   7. Draggable Points
   8. Fit all points on a map
   9. Using the overview map
   10. Interacting with GM_viewProperty and GM_clearMap
   11. Changing the size of the map area with JavaScript
   12. Loading data via AJAX
   13. Driving Directions
   14. Geocode an address (server side)
5. Resources
   • Google Maps API Signup
   • Google Maps API Documentation
   • US Geocoder
   • US Geographic Names Information System (GNIS)
   • National Geospatial-Intelligence Agency
   • Brainoff.com REST Interface for GNS and US city data
   • US Postal Code database for $5.00
   • UK Postcodes
6. Troubleshooting
7. To do...

Overview

• CF_GoogleMap: Is the main tag that the rest of the tags must be inside. Its purpose it to define the general map area and default view.
• CF_GoogleMapIcon: Defines custom icons that you can use for points on the map.
• CF_GoogleMapLine: Transforms CF_GoogleMapPoints into a pollygone. Allowing you to draw straigt lines on the map.
• CF_GoogleMapPoint: Defines points on the map. These points can either be standard points with information windows or points to create a pollygone when inside of the CF_GoogleMapLine tag.

Donate

Tag Attributes

CF_GoogleMap

<markers>
	<marker
		lon="40.144436360196856"
		lat="-88.25793743133545"
		pointname="point4792"
		pointhtml="Outback Steakhouse"
		showpoint="true"
		iconname=""
		draggable="false"/>
</markers>

CF_GoogleMapIcon

CF_GoogleMapLine

CF_GoogleMapPoint

CF_GoogleMapShow

Because not all of us program with 100% XHTML compliant code there is a work around to get the map to show in your HTML code. What you need to do is place the CF_GoogleMapShow right before your closing body tag and it will take the JavaScript content to render the map and execute it at the bottom of the page. You still can have the map located anywhere in your HTML; its just the execution code needs to be at the end.

JavaScript API

GM_viewProperty

This JavaScript function is automatically created by the cf_googleMap tag. You must first define points within the map like you normally would. From there you can use the function to interact with the points.

GM_viewProperty('pointname');

GM_changeMapSize

This JavaScript function is automatically created by the cf_googleMap tag.

GM_changeMapSize(divId,newWidth,newHeight);

GM_centerAndZoom

This JavaScript function is automatically created by the cf_googleMap tag. When called it takes all points that you have defined and centers and zooms to fit all the points to the map.

GM_centerAndZoom();

GM_createMarker

GM_clearMap

GM_clearMap() removes all points on the map. It takes no arguments.

Troubleshooting

My map works in FireFox but throws an error in IE

You need to make sure that you have the

<cf_googlemapshow/>

What happened to my application scope?

In the download there is an Application.cfm that sets the application.googleMapKey. This is just in there for the examples you can delete this and add the application.googleMapKey to your application.cfm/cfc

Why dosnet the geocode function return a lat/lon for my address in the UK, Japan and China?

The Maps API geocoder provides detailed geocoding for Andorra, Australia, Canada, France, Germany, Italy, Japan (but only in Japanese), Netherlands, New Zealand, Spain, and United States of America. For countries other than the UK and China it provides geocoding for country names and city names (e.g. "Nairobi, Kenya"). (source)

Why does the level attribute does not change the zoom on the map

If any of your points have the mainPoint attribute set to true then this level attribute may seem like it is not working. By setting the mainPoint="false" on all of your points the map will honor the zoom level that you have.

To do...

Here is a list of various items I would still like to add to this tag set. I am not sure if or when they will be added. It is just a public list of ideas

• Tabbed information windows
• Clustering points at different zoom levels (Not sure if this is needed anymore since you can load the points via AJAX in revision 1.5)
• Add window.onunload = GUnload() automatically
• Ability to have multiple maps per page
• Client side geocoding
• Add street view
• Document and create examples of geo.cfc that is included in the release (some of the stuff in there is very cool)
• Add integrated driving directions
• Document GM_viewProperty and create example with external linked points to the map
• SSL support through proxy URL
• Add Google's geocoding as an option to get the lat/lon of an address
• Ability to change the location of the points
• Change the examples to use cfimport instead of cf_
• Add local search
• Add traffic
• Add zoom in and out with scrolling