Hey, I think I see the problem. It's most likely due to a JavaScript syntax error, because the closing brace and parenthesis for the
GEvent.addListener() call is outside of your query output loop. Looping more than once would then cause invalid JavaScript code to be written to the page, and hence, it wouldn't work when more than one db record was outputted.
It would actually really help if you properly indented your code, because you would have spotted it right away.
Here's an update. I marked the change in red, and added a little formatting:
Code:
<cfquery name="map" datasource="my database" maxrows="1" dbtype="ODBC">
SELECT
hotelname,
hotelcity,
hotelstate,
hotelcountry,
id,
website,
longitude,
latitude
FROM
hotels
</cfquery>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>SmallHotels.com</title>
<meta name="gmapkey" content="abcdefg" />
<script src="http://maps.google.com/maps?file=api&v=2&key=mykey" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if( GBrowserIsCompatible() ) {
var map = new GMap2( document.getElementById( "map" ) );
map.setCenter( new GLatLng(0, -3), 1 );
map.addControl( new GSmallMapControl() );
map.addControl( new GMapTypeControl(), new GControlPosition( G_ANCHOR_TOP_RIGHT ), new GSize( 250, 5 ) );
map.enableScrollWheelZoom();
map.enableContinuousZoom();
<cfoutput query="map">
var point#id# = new GLatLng( #latitude#, #longitude# );
var marker#id# = new GMarker( point#id#, name );
var infowindow1html#id# = "<b>#hotelname# </b><br />#hotelcity#";
map.addOverlay( marker#id# );
GEvent.addListener( marker#id#, "click", function() {
marker#id#.openInfoWindowHtml( infowindow1html#id# );
} ); // This line was the problem, it was outside of the end cfoutput tag
</cfoutput>
}
}
//]]>
</script>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size:12px" onload="load()" onunload="GUnload()">
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<div id="map" style="width: 800px; height: 475px; border-width:1px; border-style:solid; border-color:black; margin-left:auto; margin-right:auto"></div>
</body>
</html>
Sometimes it helps to view the page source of the generated output from the browser too. Do you have JavaScript errors being shown btw? It's a setting in IE, and in FF its Tools -> Error Console.
---
One other quick thing. There's seems to be a JavaScript variable
name in your code that doesn't seem to be defined anywhere. I marked in red below.
Code:
<script type="text/javascript">
//<![CDATA[
function load() {
if( GBrowserIsCompatible() ) {
var map = new GMap2( document.getElementById( "map" ) );
map.setCenter( new GLatLng(0, -3), 1 );
map.addControl( new GSmallMapControl() );
map.addControl( new GMapTypeControl(), new GControlPosition( G_ANCHOR_TOP_RIGHT ), new GSize( 250, 5 ) );
map.enableScrollWheelZoom();
map.enableContinuousZoom();
<cfoutput query="map">
var point#id# = new GLatLng( #latitude#, #longitude# );
var marker#id# = new GMarker( point#id#, name );
var infowindow1html#id# = "<b>#hotelname# </b><br />#hotelcity#";
map.addOverlay( marker#id# );
GEvent.addListener( marker#id#, "click", function() {
marker#id#.openInfoWindowHtml( infowindow1html#id# );
} );
</cfoutput>
}
}
//]]>
</script>
You probably don't want that there. From looking at the google maps API, it seems that an optional GMarkerOptions object is expected there (if desired). But by a bit of luck, you don't get an "undefined variable" error thrown from that line because
name just happens to be one of those global (i.e.
window) variables defined by the browser

It's initialized to an empty string.
Hope that helps, but if you're still having a problem, feel free to post again.
-Greg