Adam Cameron's Dev Blog: ColdFusion-UI-the-Right-Way: <cfmap>

Saturday 15 March 2014

ColdFusion-UI-the-Right-Way: `<cfmap>`

G'day:
This is a bit of a lazy one, I have to admit. I've added an example for how to use the Google Maps API directly instead of <cfmap> into the ColdFusion-UI-the-Right-Way project, but it's a very very simple example. Still: it demonstrates the code and pushes the punter in the right direction. I'll do a more interesting example when I do one for <cfmapitem>, I promise.

I've reproduced the details below:

cfmap

The <cfmap> tag provides the ability to create maps in CFML. <cfmap> uses the Google Map API under the hood to provide the maps.

For this chapter we will make use of the Google Maps API directly.

Here's an example using <cfmap> to render a basic satellite map of Whatipu, just out of Auckland, New Zealand:

Listing 1 : exampleUsingCfMap.cfm

<cfmap
    centerlatitude    = "-37.0477058"
    centerlongitude    = "174.500332"
    type            = "satellite"
    zoomlevel        = "16"
    width            = "800"
    height            = "600"
/>

This renders:

Now here is an analogous map, totally written in simple HTML, JavaScript and CSS.

Listing 2 : exampleUsingGoogleMaps.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="exampleUsingGoogleMaps.css">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div id="map-canvas"></div>
    <script src="./exampleUsingGoogleMaps.js"></script>
</body>
</html>

Listing 3 : exampleUsingGoogleMaps.js

var map;
function initialise() {
    var mapOptions = {
        zoom        : 15,
        center        : new google.maps.LatLng(-37.0477058,174.500332),
        mapTypeId    : google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialise);

Listing 4 : exampleUsingGoogleMaps.css

html, body, #map-canvas {
    width    : 800px;
    height    : 600px;
}

As you can see, the only mark-up needed is the map-canvas <div>. The rest is done with JavaScript (and a touch of CSS to style the canvas). Here's the render:

Resources

Google Maps API documentation

Alternatives

That was it: pretty simple. I'd never really used either of <cfmap> or the Google Maps API before, and they were both as easy as each other to work out what to do (by RTFMing, basically). But of course having knowledge of the Google Maps API is useful and transportable knowledge to have, whereas having knowledge of <cfmap> is too niche to be of much use. If you want to get some maps onto your CFML-driven website, don't use <cfmap>, just use the API directly. It's just as easy, it's got far more flexibility, and it's a useful skill to know compared to using <cfmap>.

--
Adam