iriberri · September 10, 2015 10:32
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Gmaps example | CartoDB.js</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
  <style>
    html, body, #map {
      height: 85%;
      padding: 0;
      margin: 0;
    }
  </style>

  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
 </head>
 <body>
  




 <div id="map"></div>
   <div align="left">
    Search your location here:
   <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
 <br><br>The 10 nearest points to your location are:
 <table id="cartodb_table" class="display" cellspacing="0" width="100%">
    </table></div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 <!-- include google maps library *before* load cartodb.js -->
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
 <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>

 <script type="infowindow/html" id="infowindow_template">
      <span> custom </span>
      <div class="cartodb-popup">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
         <div class="cartodb-popup-content-wrapper">
           <div class="cartodb-popup-content">
                       <h4>{{content.data.field_3}}</h4>
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </script>


 <script>
    var map;
    var point_lat;
    var point_lon;
     var headers = ['field_3', 'field_2', 'field_1'];

  function main() {
 


          // create google maps map
          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(35.25, -85),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);

        var geocoder = new google.maps.Geocoder();  

     $(function() {
         $("#searchbox").autocomplete({
         
           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
               point_lat = lat;
                  var lng = results[0].geometry.location.lng();
                  point_lon=lng;
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;

      
        map.setZoom(13);      
        map.setCenter(new google.maps.LatLng(point_lat, point_lon));
      
          
            document.getElementById("cartodb_table").innerHTML = "";
              printTable(point_lat, point_lon);



           }
         });
     });  




          // create layer and add to the map, then add some intera
          cartodb.createLayer(map, 'https://team.cartodb.com/u/iriberri/api/v2/viz/b3b1b1d0-57a2-11e5-969d-0e8dde98a187/viz.json')
          .addTo(map)
          .on('done', function(layer) {
            var sublayer = layer.getSubLayer(0);
        

          })
          .on('error', function() {
            console.log("some error occurred");
          });

        }


         function printTable(lat, lon){
              var sql = cartodb.SQL({ user: 'iriberri' });

            sql.execute("SELECT field_3, field_2, field_1 FROM mc_donalds_wifi_locations ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint("+lon+","+lat+"),4326) ASC LIMIT 10").done(function(data) {
              console.log(data);
                var c = 0;
                   data.rows.map(function(r) { 
                      c++;
                      var n = $('<tr></tr>');
                         for (h in headers){
                           var p = $('<td></td>').text(r[headers[h]])
                           n.append(p);
                         }
                  $('#cartodb_table').append(n);
            
                  });
                 });
                }

        window.onload = main;
      </script>
    </body>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Gmaps example \| CartoDB.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
	<style>
	html, body, #map {
	height: 85%;
	padding: 0;
	margin: 0;
	}
	</style>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>





	<div id="map"></div>
	<div align="left">
	Search your location here:
	<input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
	<br><br>The 10 nearest points to your location are:
	<table id="cartodb_table" class="display" cellspacing="0" width="100%">
	</table></div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
	<!-- include google maps library before load cartodb.js -->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>

	<script type="infowindow/html" id="infowindow_template">
	<span> custom </span>
	<div class="cartodb-popup">
	<a href="#close" class="cartodb-popup-close-button close">x</a>
	<div class="cartodb-popup-content-wrapper">
	<div class="cartodb-popup-content">
	<h4>{{content.data.field_3}}</h4>
	</div>
	</div>
	<div class="cartodb-popup-tip-container"></div>
	</div>
	</script>


	<script>
	var map;
	var point_lat;
	var point_lon;
	var headers = ['field_3', 'field_2', 'field_1'];

	function main() {



	// create google maps map
	var mapOptions = {
	zoom: 4,
	center: new google.maps.LatLng(35.25, -85),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map'), mapOptions);

	var geocoder = new google.maps.Geocoder();

	$(function() {
	$("#searchbox").autocomplete({

	source: function(request, response) {

	if (geocoder == null){
	geocoder = new google.maps.Geocoder();
	}
	geocoder.geocode( {'address': request.term }, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {

	var searchLoc = results[0].geometry.location;
	var lat = results[0].geometry.location.lat();
	point_lat = lat;
	var lng = results[0].geometry.location.lng();
	point_lon=lng;
	var latlng = new google.maps.LatLng(lat, lng);
	var bounds = results[0].geometry.bounds;

	geocoder.geocode({'latLng': latlng}, function(results1, status1) {
	if (status1 == google.maps.GeocoderStatus.OK) {
	if (results1[1]) {
	response($.map(results1, function(loc) {
	return {
	label : loc.formatted_address,
	value : loc.formatted_address,
	bounds : loc.geometry.bounds
	}
	}));
	}
	}
	});
	}
	});
	},
	select: function(event,ui){
	var pos = ui.item.position;
	var lct = ui.item.locType;
	var bounds = ui.item.bounds;


	map.setZoom(13);
	map.setCenter(new google.maps.LatLng(point_lat, point_lon));


	document.getElementById("cartodb_table").innerHTML = "";
	printTable(point_lat, point_lon);



	}
	});
	});




	// create layer and add to the map, then add some intera
	cartodb.createLayer(map, 'https://team.cartodb.com/u/iriberri/api/v2/viz/b3b1b1d0-57a2-11e5-969d-0e8dde98a187/viz.json')
	.addTo(map)
	.on('done', function(layer) {
	var sublayer = layer.getSubLayer(0);


	})
	.on('error', function() {
	console.log("some error occurred");
	});

	}


	function printTable(lat, lon){
	var sql = cartodb.SQL({ user: 'iriberri' });

	sql.execute("SELECT field_3, field_2, field_1 FROM mc_donalds_wifi_locations ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint("+lon+","+lat+"),4326) ASC LIMIT 10").done(function(data) {
	console.log(data);
	var c = 0;
	data.rows.map(function(r) {
	c++;
	var n = $('<tr></tr>');
	for (h in headers){
	var p = $('<td></td>').text(r[headers[h]])
	n.append(p);
	}
	$('#cartodb_table').append(n);

	});
	});
	}

	window.onload = main;
	</script>
	</body>