00-results-container.html

## 00-results-container.html
<div id="results-container">
	<h3>Results</h3>
	<ul id="results-list">
	</ul><!-- #results-list -->
</div><!-- #results-container -->

## 01-listing-google-maps-markers.js
/**
 * The code below assumes:
 *
 * 1. You've added all of the markers to an array earlier in your code when plotting the map.
 * 2. You have access to the jQuery object by using the '$' shortcut. How you opt to achieve
 *    this is outside the scope of this gist.
 * 3. The `bounds` and the `markers` variables are defined outside the scope of this function
 *    when plotting the map.
 *
 * If you have questions about any of the above assumptions, please read further articles here:
 * https://tommcfarlin.com/tag/google-maps-api/
 */
var current_marker;
google.maps.event.addListener( map, 'idle', function() {

  // Read the bounds of the map being displayed.
  bounds = map.getBounds();

  // Iterate through all of the markers that are displayed on the *entire* map.
	for ( i = 0, l = markers.length; i < l; i++ ) {

    current_marker = markers[ i ];

    /* If the current marker is visible within the bounds of the current map,
     * let's add it as a list item to #nearby-results that's located above
     * this script.
     */
    if ( bounds.contains( current_marker.getPosition() ) ) {

      /* Only add a list item if it doesn't already exist. This is so that
       * if the browser is resized or the tablet or phone is rotated, we don't
       * have multiple results.
       */
      if ( 0 === $( '#map-marker-' + i ).length ) {

        $( '#results-list' ).append(
          $( '<li />' )
           .attr( 'id', 'map-marker-' + i )
           .attr( 'class', 'depot-result' )
           .html( current_marker.content )
        );

      }

    }

  }

});

## 02-google-maps-at-a-breakpoint.js
(function( $ ) {

	// First, we have to force the size of the map in order to determine the results
	$(function() {

		if ( 768 > $( window ).width() ) {

			$( '#map-canvas' )
				.height( 100 )
				.width( '100%' )
				.css( 'visibility', 'hidden' )

		}

		$( window ).on( 'resize', function() {

			if ( 768 <= $( window ).width() ) {

				$( '#map-canvas' )
					.height( 'auto' )
					.width( '100%' )
					.css( 'visibility', 'visible' )
					.show();
			}

		});

	});

})( jQuery );

## 03-hiding-the-map-after-listing-markers.js
/**
 * The code below assumes:
 *
 * 1. You've added all of the markers to an array earlier in your code when plotting the map.
 * 2. You have access to the jQuery object by using the '$' shortcut. How you opt to achieve
 *    this is outside the scope of this gist.
 * 3. The `bounds` and the `markers` variables are defined outside the scope of this function
 *    when plotting the map.
 *
 * If you have questions about any of the above assumptions, please read further articles here:
 * https://tommcfarlin.com/tag/google-maps-api/
 */
var current_marker;
google.maps.event.addListener( map, 'idle', function() {

  // Read the bounds of the map being displayed.
  bounds = map.getBounds();

  // Iterate through all of the markers that are displayed on the *entire* map.
	for ( i = 0, l = markers.length; i < l; i++ ) {

    current_marker = markers[ i ];

    /* If the current marker is visible within the bounds of the current map,
     * let's add it as a list item to #nearby-results that's located above
     * this script.
     */
    if ( bounds.contains( current_marker.getPosition() ) ) {

      /* Only add a list item if it doesn't already exist. This is so that
       * if the browser is resized or the tablet or phone is rotated, we don't
       * have multiple results.
       */
      if ( 0 === $( '#map-marker-' + i ).length ) {

        $( '#results-list' ).append(
          $( '<li />' )
           .attr( 'id', 'map-marker-' + i )
           .attr( 'class', 'depot-result' )
           .html( current_marker.content )
        );

      }

    }

    // Now  hide the map.
    if ( 768 > $( window ).width() ) {
	    $( '#map-canvas' ).hide();
    }

  }

});