rapala61/map2.html

## map2.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Maps</title>
    <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>
    <style media="screen">
      #map {
        height: 500px;
      }
    </style>
    <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">
            <div id="map">
              <!-- map goes here -->
            </div>

          </div>

        </div>

      </div>


      <div id="map">
        <!-- Maps goes here -->
      </div>


    </div>
    <script type="text/javascript">

      var myMap = {};
      var myApplication = {};

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

        this.currentLatLng = new google.maps.LatLng( 40.6974881, -73.979681 );
        this.map = new google.maps.Map( this.mapEl, {
            center: this.currentLatLng,
            zoom: this.zoom
        })
      }

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

    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Maps</title>
	<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>
	<style media="screen">
	#map {
	height: 500px;
	}
	</style>
	<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">
	<div id="map">
	<!-- map goes here -->
	</div>

	</div>

	</div>

	</div>



	<div id="map">
	<!-- Maps goes here -->
	</div>


	</div>
	<script type="text/javascript">

	var myMap = {};
	var myApplication = {};

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

	this.currentLatLng = new google.maps.LatLng( 40.6974881, -73.979681 );
	this.map = new google.maps.Map( this.mapEl, {
	center: this.currentLatLng,
	zoom: this.zoom
	})
	}

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

	</script>

	</body>
	</html>