API tools faq
paste
wboykinm

example fusion table --> JS API site

wboykinm
Jan 24th, 2012
192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3.  copyright (c) 2011 Google inc.
  4.  
  5.  You are free to copy and use this sample.
  6.  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
  7.  
  8. -->
  9. <html>
  10. <head>
  11. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  12. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  13.  
  14. <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
  15.  
  16. <!-- Style -->
  17. <style type="text/css">
  18.   body { height: 100%; margin: 0px; padding: 10px; }
  19.   #map_canvas { height: 600px; width: 700px; }
  20. </style>
  21.  
  22. <!-- Google Maps API javascript -->
  23. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  24.  
  25. <!-- Import the visualization javascript -->
  26. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  27.  
  28. <!-- Initialize visualization -->
  29. <script type="text/javascript">
  30.   google.load('visualization', '1', {});
  31. </script>
  32.  
  33. <script type="text/javascript">
  34.  
  35. var tableid = 297050; //the table id
  36. var map;
  37. var geocoder;
  38. var lastWindow;
  39.  
  40. /* INITIALIZE - initialize the map and geocoder */
  41.  
  42. function initialize() {
  43.   geocoder = new google.maps.Geocoder();
  44.   map = new google.maps.Map(document.getElementById('map_canvas'), {
  45.     center: new google.maps.LatLng(37.4, -122.1), //the center lat and long
  46.     zoom: 10, //zoom
  47.     mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
  48.   });
  49.  
  50.   //make gviz request
  51.   setData();
  52.  
  53. }
  54.  
  55. /* GVIZ - get data from Fusion Tables */
  56.  
  57. function setData() {
  58.   //create a viz query to send to Fusion Tables
  59.   var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + encodeURIComponent("SELECT 'Store Name', Address, delivery FROM 297050"));
  60.  
  61.   //set the callback function that will be called when the query returns
  62.   query.send(getData);
  63. }
  64.  
  65. //define callback function, this is called when the results are returned
  66. function getData(response) {
  67.  
  68.   //for more information on the response object, see the documentation
  69.   //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  70.   numRows = response.getDataTable().getNumberOfRows();
  71.   numCols = response.getDataTable().getNumberOfColumns();
  72.  
  73.   //create an array of row values
  74.   for (i = 0; i < numRows; i++) {
  75.    var row = [];
  76.    for (j = 0; j < numCols; j++) {
  77.      row.push(response.getDataTable().getValue(i, j));
  78.    }
  79.    codeAddress(row);
  80.  }
  81. }
  82.  
  83. /* GEOCODING - geocode data in Fusion Tables, if the data is a String Address */
  84.  
  85. //geocode the address, and create a new marker and InfoWindow at the geocoded location
  86. function codeAddress(row) {
  87.  geocoder.geocode( { 'address': row[1] }, function(results, status) {
  88.    if (status == google.maps.GeocoderStatus.OK) {
  89.      var coordinate = results[0].geometry.location;
  90.      
  91.      //create the marker
  92.      var marker = new google.maps.Marker({
  93.          map: map,
  94.          position: coordinate,
  95.          //this is where the magic happens!
  96.          icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
  97.      });
  98.      
  99.      //add a click listener to the marker to open an InfoWindow,
  100.      google.maps.event.addListener(marker, 'click', function(event) {
  101.        if(lastWindow) lastWindow.close(); //close the last window if it exists
  102.        lastWindow = new google.maps.InfoWindow( {
  103.          position: coordinate,
  104.          content: row[0] //this is the row data, you can use HTML here for the content
  105.        });
  106.        lastWindow.open(map);
  107.      });
  108.    }
  109.  });
  110. }
  111.  
  112. </script>
  113.  
  114. </head>
  115. <body onload="initialize()">
  116.   <div id="map_canvas"></div>
  117.   <p>The Code:</p>
  118.   <pre>
  119. var tableid = 297050; //the table id
  120. var map;
  121. var geocoder;
  122. var lastWindow;
  123.  
  124. /* INITIALIZE - initialize the map and geocoder */
  125.  
  126. function initialize() {
  127.   geocoder = new google.maps.Geocoder();
  128.   map = new google.maps.Map(document.getElementById('map_canvas'), {
  129.     center: new google.maps.LatLng(37.4, -122.1), //the center lat and long
  130.     zoom: 10, //zoom
  131.     mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
  132.   });
  133.  
  134.   //make gviz request
  135.   setData();
  136.  
  137. }
  138.  
  139. /* GVIZ - get data from Fusion Tables */
  140.  
  141. function setData() {
  142.   //create a viz query to send to Fusion Tables
  143.   var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + encodeURIComponent("SELECT 'Store Name', Address, delivery FROM 297050"));
  144.  
  145.   //set the callback function that will be called when the query returns
  146.   query.send(getData);
  147. }
  148.  
  149. //define callback function, this is called when the results are returned
  150. function getData(response) {
  151.  
  152.   //for more information on the response object, see the documentation
  153.   //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  154.   numRows = response.getDataTable().getNumberOfRows();
  155.   numCols = response.getDataTable().getNumberOfColumns();
  156.  
  157.   //create an array of row values
  158.   for (i = 0; i &lt; numRows; i++) {
  159.     var row = [];
  160.     for (j = 0; j &lt; numCols; j++) {
  161.       row.push(response.getDataTable().getValue(i, j));
  162.     }
  163.     codeAddress(row);
  164.   }
  165. }
  166.  
  167. /* GEOCODING - geocode data in Fusion Tables, if the data is a String Address */
  168.  
  169. //geocode the address, and create a new marker and InfoWindow at the geocoded location
  170. function codeAddress(row) {
  171.   geocoder.geocode( { 'address': row[1] }, function(results, status) {
  172.     if (status == google.maps.GeocoderStatus.OK) {
  173.       var coordinate = results[0].geometry.location;
  174.      
  175.       //create the marker
  176.       var marker = new google.maps.Marker({
  177.           map: map,
  178.           position: coordinate,
  179.           //this is where the magic happens!
  180.           icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
  181.       });
  182.      
  183.       //add a click listener to the marker to open an InfoWindow,
  184.       google.maps.event.addListener(marker, 'click', function(event) {
  185.         if(lastWindow) lastWindow.close(); //close the last window if it exists
  186.         lastWindow = new google.maps.InfoWindow( {
  187.           position: coordinate,
  188.           content: row[0] //this is the row data, you can use HTML here for the content
  189.         });
  190.         lastWindow.open(map);
  191.       });
  192.     }
  193.   });
  194. }
  195. </pre>
  196. </body>
  197. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!