Go Back   CodingForums.com > :: Server side development > Other server side languages/ issues > ColdFusion

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-29-2010, 10:05 PM   PM User | #1
Miami Janie
New to the CF scene

 
Join Date: Jan 2010
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Miami Janie is an unknown quantity at this point
Question Google Map marker problem using Access DB and cfquery

I’ve been trying for days to add markers to Google Maps using MSAccess queries in Coldfusion. The CF coding in this seems fine and works when I use static data but when I output from the query, the map and markers don’t display.

Through another help board I discovered I can display one marker using MAXROWS = 1. It doesn’t display any using MAXROWS-2 which is the number of rows I’ve been testing with.

I’m Coldfusion self-taught so my templates are pretty primitive but I can usually eventually get thing to work. The Google Maps problem has me baffled.

This is my code:
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#);
		</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>
<cfoutput query="map">

</cfoutput> 
</body>
</html>
The map is here with MAXROWS=1:
http://smallhotels.com/cfmap6.cfm

With anything else but MAXROWS=1 it just draws the border.

Does anyone see anything that could be causing this?

Thanks for any help!

Last edited by Miami Janie; 01-30-2010 at 12:59 PM..
Miami Janie is offline   Reply With Quote
Old 01-30-2010, 07:26 AM   PM User | #2
Gjslick
Regular Coder

 
Join Date: Feb 2009
Location: NJ, USA
Posts: 476
Thanks: 2
Thanked 70 Times in 69 Posts
Gjslick will become famous soon enough
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
Gjslick is offline   Reply With Quote
Old 01-30-2010, 12:58 PM   PM User | #3
Miami Janie
New to the CF scene

 
Join Date: Jan 2010
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Miami Janie is an unknown quantity at this point
Thank you!!

Greg-

A really appreciate the reply! The code is working fine now and your tips will help me tighten up the code.

Now I can get on to the fun part of building this sight!

Thanks again!
Jane
Miami Janie is offline   Reply With Quote
Old 01-31-2010, 07:33 AM   PM User | #4
Gjslick
Regular Coder

 
Join Date: Feb 2009
Location: NJ, USA
Posts: 476
Thanks: 2
Thanked 70 Times in 69 Posts
Gjslick will become famous soon enough
Hey, glad to help, and good luck on the site

-Greg

Last edited by Gjslick; 01-31-2010 at 07:37 AM..
Gjslick is offline   Reply With Quote
Reply

Bookmarks

Tags
coldfusion, google maps, markers, maxrows, ms access

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:05 PM.


Advertisement
Log in to turn off these ads.