Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    Hey, glad to help, and good luck on the site

    -Greg
    Last edited by Gjslick; 01-31-2010 at 07:37 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •