jlord/index.html

## index.html
<html>
<head>
  <title>I'm learning</title>
  <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
  <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
  <script src="http://zeptojs.com/zepto.js" type="text/javascript"></script>
  <script src="map.js" type="text/javascript"></script>
  <style>
    body {margin: 0; padding: 0; text-align: center;}
    #button { -webkit-transition: -webkit-transform 3s ease-in; box-shadow: 0 0 25px #EFEF4D; margin: auto; margin-top: 15px; padding: 3px 6px; height: 20px; width: 200px;}
    #button:hover { -webkit-transform: rotate(360deg); }
    #button:active { box-shadow: 0 0 25px #4DEFB9; }
    input {margin: auto; margin-top: 10px; width: 300px;}
    #map {margin: auto; box-shadow: 0 0 5px #888; height: 70%; width: 75%;}
    h1 {font-family: Baskerville; margin-top: 15px;}
  </style>
</head>
  <body>
    <h1>HeLlO. Yes, this is map.</h1>
    <div id="map"></div>
    <input type=text value="10 Downing Street, London"></input>
    <div id="button">SUBMIT QUERY, HUMAN!</div>

  </body>
</html>

## map.js
var map
var defaultZoom = 13

function loadMap() {
 	map = new L.Map('map');
	var cloudmade = new L.TileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
	    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
	    maxZoom: 18
	});
	var warnervegas = new L.LatLng(32.617, -83.612); // geographical point (longitude and latitude)
	map.setView(warnervegas, defaultZoom).addLayer(cloudmade);
	$("#button").bind('click', function clickButt(){
		var address = $("input").val()
		geoCode(address, displayAddress)
	})
}

document.addEventListener('DOMContentLoaded', loadMap)

function geoCode(address, callback) {
	var firstPart = 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.geojs?query='
	var url = firstPart + encodeURI(address)
	$.ajaxJSONP({
	  url: url + '&callback=?',
	  success: callback
	})
}

function displayAddress(data) {
	console.log(data)
	var markerLocation = new L.LatLng(data.features[0].centroid.coordinates[1], data.features[0].centroid.coordinates[0]);
	setCenter(markerLocation)
	var marker = new L.Marker(markerLocation);
	map.addLayer(marker);
	}

function setCenter(markerLocation) {
	map.setView(markerLocation, defaultZoom)
}
	<html>
	<head>
	<title>I'm learning</title>
	<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
	<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
	<script src="http://zeptojs.com/zepto.js" type="text/javascript"></script>
	<script src="map.js" type="text/javascript"></script>
	<style>
	body {margin: 0; padding: 0; text-align: center;}
	#button { -webkit-transition: -webkit-transform 3s ease-in; box-shadow: 0 0 25px #EFEF4D; margin: auto; margin-top: 15px; padding: 3px 6px; height: 20px; width: 200px;}
	#button:hover { -webkit-transform: rotate(360deg); }
	#button:active { box-shadow: 0 0 25px #4DEFB9; }
	input {margin: auto; margin-top: 10px; width: 300px;}
	#map {margin: auto; box-shadow: 0 0 5px #888; height: 70%; width: 75%;}
	h1 {font-family: Baskerville; margin-top: 15px;}
	</style>
	</head>
	<body>
	<h1>HeLlO. Yes, this is map.</h1>
	<div id="map"></div>
	<input type=text value="10 Downing Street, London"></input>
	<div id="button">SUBMIT QUERY, HUMAN!</div>

	</body>
	</html>
	var map
	var defaultZoom = 13

	function loadMap() {
	map = new L.Map('map');
	var cloudmade = new L.TileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
	maxZoom: 18
	});
	var warnervegas = new L.LatLng(32.617, -83.612); // geographical point (longitude and latitude)
	map.setView(warnervegas, defaultZoom).addLayer(cloudmade);
	$("#button").bind('click', function clickButt(){
	var address = $("input").val()
	geoCode(address, displayAddress)
	})
	}

	document.addEventListener('DOMContentLoaded', loadMap)

	function geoCode(address, callback) {
	var firstPart = 'http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/v2/find.geojs?query='
	var url = firstPart + encodeURI(address)
	$.ajaxJSONP({
	url: url + '&callback=?',
	success: callback
	})
	}

	function displayAddress(data) {
	console.log(data)
	var markerLocation = new L.LatLng(data.features[0].centroid.coordinates[1], data.features[0].centroid.coordinates[0]);
	setCenter(markerLocation)
	var marker = new L.Marker(markerLocation);
	map.addLayer(marker);
	}

	function setCenter(markerLocation) {
	map.setView(markerLocation, defaultZoom)
	}