rapala61/maps3.html

## maps3.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Maps</title>
    <style type="text/css">

      /*  The map has to have a height before it is 'drawn' */
      #countries-list {
        height: 500px;
        overflow: scroll;
        list-style-type: none;
      }
      #countries-list li {
        cursor: pointer;
      }
      #countries-list li:hover {
        background-color: lightgrey;
      }

      #map {
        height: 500px;
      }


    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" charset="utf-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript" src="countries.js"></script>

    <!-- Step 1: Include Maps JS -->

    <!-- 'callback' means it will call this function when the script finishes being imported in the page -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVnSIQrIZenVFT55uztDuKQAARAfTjBq4">
    </script>
  </head>
  <body>

    <div class="wrapper">
      <div class="map-section">
        <div class="row">
          <div class="four columns countries-container">
            <ul id="countries-list">

            </ul>
          </div>
          <div class="eight columns map-container">
            <!-- Step 2: Create a <div> with id of "map" -->
            <div id="map"></div>
          </div>
        </div>
      </div>


    </div>

    <script type="text/javascript">
      var myMap = myMap || {};
      var myApplication = myApplication || {};

      myMap.init = function() {
        this.map;
        this.marker;
        this.currentLatLng;
        this.zoom = 6;
        this.mapEl = document.getElementById('map');

        // New york lat and long
        this.currentLatLng = new google.maps.LatLng( 40.6974881, -73.979681 );
        this.map = new google.maps.Map( this.mapEl, {
          center: this.currentLatLng,
          zoom: this.zoom,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        this.marker = new google.maps.Marker({
          position: this.currentLatLng,
          map: this.map,
          title: 'I am a marker!',
          animation: google.maps.Animation.DROP
        });

      }

      myMap.reCenterMap = function() {
        myMap.map.setCenter( this.currentLatLng );
      }

      myMap.updateMarker = function() {
        myMap.marker.setPosition( this.currentLatLng );
        myMap.marker.setAnimation( google.maps.Animation.DROP );
      }

      myApplication.init = function() {
        this.renderCountries();
      }

      myApplication.renderCountries = function(){
        var $countries = $('#countries-list')
        $.each(countries, function(i, c) {
          var $country = $('<a>').html('<li>' + c.name + '</li>').data({'lat': c.latitude, 'lng': c.longitude});
          myApplication.bindCountry( $country );
          $countries.append($country);
        })
      }

      myApplication.bindCountry = function( $country ) {
        $country.on('click', function(e) {
          var $country = $(this);
          myMap.currentLatLng = new google.maps.LatLng( $country.data('lat'), $country.data('lng') );
          myMap.reCenterMap();
          myMap.updateMarker();
        });
      }

      $(document).ready(function() {
        myMap.init();
        myApplication.init();
      });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Maps</title>
	<style type="text/css">

	/* The map has to have a height before it is 'drawn' */
	#countries-list {
	height: 500px;
	overflow: scroll;
	list-style-type: none;
	}
	#countries-list li {
	cursor: pointer;
	}
	#countries-list li:hover {
	background-color: lightgrey;
	}

	#map {
	height: 500px;
	}


	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" charset="utf-8">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript" src="countries.js"></script>

	<!-- Step 1: Include Maps JS -->

	<!-- 'callback' means it will call this function when the script finishes being imported in the page -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVnSIQrIZenVFT55uztDuKQAARAfTjBq4">
	</script>
	</head>
	<body>

	<div class="wrapper">
	<div class="map-section">
	<div class="row">
	<div class="four columns countries-container">
	<ul id="countries-list">

	</ul>
	</div>
	<div class="eight columns map-container">
	<!-- Step 2: Create a <div> with id of "map" -->
	<div id="map"></div>
	</div>
	</div>
	</div>


	</div>

	<script type="text/javascript">
	var myMap = myMap \|\| {};
	var myApplication = myApplication \|\| {};

	myMap.init = function() {
	this.map;
	this.marker;
	this.currentLatLng;
	this.zoom = 6;
	this.mapEl = document.getElementById('map');

	// New york lat and long
	this.currentLatLng = new google.maps.LatLng( 40.6974881, -73.979681 );
	this.map = new google.maps.Map( this.mapEl, {
	center: this.currentLatLng,
	zoom: this.zoom,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	this.marker = new google.maps.Marker({
	position: this.currentLatLng,
	map: this.map,
	title: 'I am a marker!',
	animation: google.maps.Animation.DROP
	});

	}

	myMap.reCenterMap = function() {
	myMap.map.setCenter( this.currentLatLng );
	}

	myMap.updateMarker = function() {
	myMap.marker.setPosition( this.currentLatLng );
	myMap.marker.setAnimation( google.maps.Animation.DROP );
	}

	myApplication.init = function() {
	this.renderCountries();
	}

	myApplication.renderCountries = function(){
	var $countries = $('#countries-list')
	$.each(countries, function(i, c) {
	var $country = $('<a>').html('<li>' + c.name + '</li>').data({'lat': c.latitude, 'lng': c.longitude});
	myApplication.bindCountry( $country );
	$countries.append($country);
	})
	}

	myApplication.bindCountry = function( $country ) {
	$country.on('click', function(e) {
	var $country = $(this);
	myMap.currentLatLng = new google.maps.LatLng( $country.data('lat'), $country.data('lng') );
	myMap.reCenterMap();
	myMap.updateMarker();
	});
	}

	$(document).ready(function() {
	myMap.init();
	myApplication.init();
	});

	</script>
	</body>
	</html>