9 Replies - 756 Views - Last Post: 05 May 2013 - 06:29 PM

#1 stargazer_bea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-May 13

Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 02:33 PM

Hello!

I'm working on a project with a nonprofit trying to map data about health clinics. I have the database uploaded to fusiontables and my intent is to have checkboxes that select different layers from the fusiontable to project onto google maps.

So, to do this and learn how to make it work I tried to work with some of the code samples available on the FusionTables documentation. Primarily, I tried to rework the code from "https://developers.google.com/fusiontables/docs/samples/in" to suit my needs.

I changed it so that when a checkbox was clicked, it would draw the value from the checkbox and make that the field that the query would select from. Since the database has fields that have either 1 or 0 (a health clinic either provides STD services or it doesn't) I thought that it would be easy to make it so that checking the checkbox according to each service would select locations that provided those services.

Either my SQL is wrong, or my understanding of how to project layers is wrong, because now when I try to make this the index of my website, the google map doesn't even display at all!

Does anyone have any idea where in my code I am messing up?

I was just trying to rework some code examples so I'd better understand how fusiontables/google maps API worked. Ultimately I want to be able to select from 9 or 12 layers and select by proximity to public transit and other advanced things, but I'm still at the point where I'm just trying to get the map to display 1-3 layers... so some help would be really appreciated.

Thank you for reading (the code is below)


<!DOCTYPE html>
<!--
  Copyright 2011 Google Inc. All Rights Reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Fusion Tables Layer Example: IN query</title>


<link rel="stylesheet" type="text/css" href="default.css">
    
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var tableId = '1H1nlWzUJtpdz1wABxQr0DIajemaUCqSF4wyCbDw';

      		var chicago = new google.maps.LatLng(41.850033, -87.6500523);

   var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: chicago,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
      var layer = new google.maps.FusionTablesLayer();
        filterMap(layer, tableId, map);

        google.maps.event.addDomListener(document.getElementById('mental-health'),
            'click', function() {
              filterMap(layer, tableId, map);
        });

        google.maps.event.addDomListener(document.getElementById('medical'),
            'click', function() {
              filterMap(layer, tableId, map);
        });

        google.maps.event.addDomListener(document.getElementById('std-testing'),
            'click', function() {
              filterMap(layer, tableId, map);
        });
      }


      // Filter the map based on checkbox selection.
      function filterMap(layer, tableId, map) {
     		var fieldthing =document.getelementby("store").value;
     		
     		if(fieldthing){
          if (!layer.getMap())
           {
            layer.setMap(map);
          }
          
          layer.setOptions({
            query: {
              select: 'Address',
              from: tableId,
              where: fieldthing = '1'
            }
          });
        } else {
          layer.setMap(null);
        }
      }

      // Generate a where clause from the checkboxes. If no boxes
      // are checked, return an empty string.
    //  function generateWhere() 
     // {
   //     var filter = [];
    //    var stores = document.getElementsByName('store');
    //    for (var i = 0, store; store = stores[i]; i++)
        // {
    //      if (store.checked) 
          //{
      //      var storeName = store.value.replace(/'/g, '\\\'');
      //      filter.push("'" + storeName + "'");
         // }
       // }
    //    var where = '';
     //   if (filter.length) 
        //{
     //     where = "'Store Name' IN (" + filter.join(',') + ')';
       // }
     //   return where;
     // }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>

  <div>
      <input type="checkbox" checked="checked" name="store"
          id="mental-health" value="Mental Health">
      <label>Mental Health</label>
      <input type="checkbox" checked="checked" name="store"
          id="medical" value="Medical**">
      <label>Medical</label>
      <input type="checkbox" checked="checked" name="store"
          id="std-testing" value="STI/HIV Testing & Counseling¶">
      <label>STD Testing</label>
    </div>
  </body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Struggling with Google Maps API / FusionTables

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3075
  • View blog
  • Posts: 10,276
  • Joined: 12-December 12

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:06 PM

This is wrong (getelementby):

var fieldthing =document.getelementby("store").value;

'store' is a name, so getElementsByName would return an array of elements. If, as it appears, you expect a single element, then it is preferable in JS to use (unique) IDs, and getElementById.

If you wish to get the first element with the name 'code':

var fieldthing = document.getElementsByName('store')[0];    // .value if required


Your browser's console probably gave errors - see my signature.

You also have a strange character towards the bottom, after 'Testing & Counseling', probably inserted by your editor.

This post has been edited by andrewsw: 03 May 2013 - 03:07 PM

Was This Post Helpful? 0
  • +
  • -

#3 stargazer_bea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-May 13

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:11 PM

I changed that line of code, but it still doesn't work. Thanks for the input about using ID versus name. Any other ideas about what might be wrong?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3075
  • View blog
  • Posts: 10,276
  • Joined: 12-December 12

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:14 PM

View Poststargazer_bea, on 03 May 2013 - 10:11 PM, said:

I changed that line of code, but it still doesn't work. Thanks for the input about using ID versus name. Any other ideas about what might be wrong?

What errors appear in your console? Did you remove that strange character as well.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3075
  • View blog
  • Posts: 10,276
  • Joined: 12-December 12

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:20 PM

Added: If you are looking to find those checkboxes that are checked then you'll need to loop through them, like the code that you've commented out.
Was This Post Helpful? 0
  • +
  • -

#6 stargazer_bea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-May 13

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:33 PM

I don't understand how to check the browser console, and I don't understand how to loop through so that the map is displaying. How would I go about looping in this changed example?
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3075
  • View blog
  • Posts: 10,276
  • Joined: 12-December 12

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:51 PM

View Poststargazer_bea, on 03 May 2013 - 10:33 PM, said:

I don't understand how to check the browser console, and I don't understand how to loop through so that the map is displaying. How would I go about looping in this changed example?

I have links to information about the various browser's consoles in my signature.

Did you get the example that you referred to working? It already has code that loops through checkboxes.
Was This Post Helpful? 0
  • +
  • -

#8 stargazer_bea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-May 13

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 03:52 PM

No, because that chunk of code was for using an IN query, and since I'm not doing that anymore, I'm not sure which parts of the loop I need to rearrange and make in into something that will loop through the checkboxes as they are now.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3075
  • View blog
  • Posts: 10,276
  • Joined: 12-December 12

Re: Struggling with Google Maps API / FusionTables

Posted 03 May 2013 - 04:05 PM

You still need to loop through the checkboxes to discover which one is checked (assuming they only check one). You could still study that example, as it does exactly that: looping through checkboxes. Or find another "looping through checkboxes" tutorial.

Your WHERE clause is wrong and I assume that you are looking for something like:

"FIELDNAME = 'checked_value'"

so you would need to construct this using:
"FIELDNAME = '" + variableContainingCheckedValue + "'"

Good luck!
Was This Post Helpful? 0
  • +
  • -

#10 stargazer_bea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 03-May 13

Re: Struggling with Google Maps API / FusionTables

Posted 05 May 2013 - 06:29 PM

://>

I've spent the last couple days trying to figure this out with no luck. I showed a friend of mine the code and what I'm trying to do with the query and he was at a loss as well. what exactly am I supposed to do to fix the WHERE clause?

This post has been edited by Dormilich: 06 May 2013 - 07:10 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1