andrewbt/record_information_outside_map_canvas.html

## record_information_outside_map_canvas.html
...
<body>
    <div id="map-container">
      <input id="pac-input" class="controls" type="text"
            placeholder="Enter a location">
        <div id="map-canvas"></div>
    </div>
    <div id="store-info">
      <p>Search an address in the box above, which will autocomplete for you. The nearest 5 store locations will be displayed here with selected details about each location.</p>
    </div>
    ...
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
      <script type="text/javascript">
        function get_stores(loc) {
          //could make this a cartodb.SQL for a cleaner look, this was done quickly
          var base_url = "https://andrewbt.cartodb.com/api/v2/sql?api_key=API_KEY_HERE&q="
          var searchpoint_longLat = "st_setsrid(st_makepoint(" + loc.lng() + "," + loc.lat() + "),4326) "
          var sql_statement = "SELECT the_geom_webmercator, cartodb_id, name, telephone, monday_open, monday_close, location_description, latitude, longitude " +
                              "FROM TABLE_NAME_HERE " +
                              "ORDER BY the_geom <-> " + searchpoint_longLat +
                              "LIMIT 5";
          var div_content = "";
          $.getJSON(base_url+sql_statement, function(data) {
            $.each(data.rows, function(key, val) {
              var name = String(val.name);
              var telephone = String(val.telephone);
              var monday_times = String(val.monday_open) + " - " + String(val.monday_close);
              var location_description = String(val.location_description);
              var latlng_array = "[" + val.latitude + ", " + val.longitude + "]";

              var html_store_detail = "<strong>" +
                                        "<a href='#' onclick='openInfoWindow(cdblayer, " + latlng_array + ", " + val.cartodb_id + ");return false;'>" +
                                          name +
                                        "</a>" +
                                      "</strong><br>" +
                                      "Tel: " + telephone + "<br>" +
                                      "Monday hours: " + monday_times + "<br>" +
                                      "Location Description: " + location_description + "<br>" +
                                      "================ <br> <br>"

              console.log(html_store_detail);
              div_content += html_store_detail;
            });
            //now that div_content has been populated from the foreach, add it to the div
            $('#store-info').html(div_content);

          });
        }

        function initialize() {
          // set up the map as the "map" variable
          // if the user searches a location in the "pac-input" box, we'll get a "location" object with the lat/long of the user's location
              map.setCenter(location);
              get_stores(location);
              map.setZoom(17);
        }
        //call the initialize() function and start the map
      </script>
</body>
	...
	<body>
	<div id="map-container">
	<input id="pac-input" class="controls" type="text"
	placeholder="Enter a location">
	<div id="map-canvas"></div>
	</div>
	<div id="store-info">
	<p>Search an address in the box above, which will autocomplete for you. The nearest 5 store locations will be displayed here with selected details about each location.</p>
	</div>
	...
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
	<script type="text/javascript">
	function get_stores(loc) {
	//could make this a cartodb.SQL for a cleaner look, this was done quickly
	var base_url = "https://andrewbt.cartodb.com/api/v2/sql?api_key=API_KEY_HERE&q="
	var searchpoint_longLat = "st_setsrid(st_makepoint(" + loc.lng() + "," + loc.lat() + "),4326) "
	var sql_statement = "SELECT the_geom_webmercator, cartodb_id, name, telephone, monday_open, monday_close, location_description, latitude, longitude " +
	"FROM TABLE_NAME_HERE " +
	"ORDER BY the_geom <-> " + searchpoint_longLat +
	"LIMIT 5";
	var div_content = "";
	$.getJSON(base_url+sql_statement, function(data) {
	$.each(data.rows, function(key, val) {
	var name = String(val.name);
	var telephone = String(val.telephone);
	var monday_times = String(val.monday_open) + " - " + String(val.monday_close);
	var location_description = String(val.location_description);
	var latlng_array = "[" + val.latitude + ", " + val.longitude + "]";

	var html_store_detail = "<strong>" +
	"<a href='#' onclick='openInfoWindow(cdblayer, " + latlng_array + ", " + val.cartodb_id + ");return false;'>" +
	name +
	"</a>" +
	"</strong><br>" +
	"Tel: " + telephone + "<br>" +
	"Monday hours: " + monday_times + "<br>" +
	"Location Description: " + location_description + "<br>" +
	"================ <br> <br>"

	console.log(html_store_detail);
	div_content += html_store_detail;
	});
	//now that div_content has been populated from the foreach, add it to the div
	$('#store-info').html(div_content);

	});
	}

	function initialize() {
	// set up the map as the "map" variable
	// if the user searches a location in the "pac-input" box, we'll get a "location" object with the lat/long of the user's location
	map.setCenter(location);
	get_stores(location);
	map.setZoom(17);
	}
	//call the initialize() function and start the map
	</script>
	</body>