brunopgalvao/index.html

## index.html
<!DOCTYPE html>

<!--
-- Bruno Galvao
-- 12/11/11
-- Bluewolf Coding Assignment
-->

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>bluewolf: Geocoding</title>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://www.google.com/jsapi?key=ABQIAAAAdT5zMp4AEngQhIIbmLivDxSgdPsU9-HX8kv2A7G8dILD0bjJGRR_uzHyPCbgtq1iMfBtg69q9pwq2g" type="text/javascript"></script>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<!-- getJSON function works in IE with jquery 1.3 not with 1.7.1
  -- Check if IE and set script source to jquery 1.3 -->
<script type="text/javascript">
	$(document).ready(function(){

		if($.browser.msie)
		{
			var new_scr=document.createElement('script');
			new_scr.src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js";
			document.getElementsByTagName('head')[0].appendChild(new_scr);
		}
	});
</script>
<!-- Google Maps API -->
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCeQIme27M-qa2TpeHcnr5SdbLVknxvdz4&sensor=false">
</script>

<script type="text/javascript">

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
	// Center Google Map on following coordinates
    var latlng = new google.maps.LatLng(40.743502,-73.987409);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
	// Create Google Map!
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
	// Grab address specified by user
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
		  // Calculate bounding box
		  var north = results[0].geometry.location.lat() + 1;
		  var south = results[0].geometry.location.lat() - 1;
		  var east = results[0].geometry.location.lng() + 1;
		  var west = results[0].geometry.location.lng() - 1;

		  var earthquake = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=brunopgalvao';
		  // Call Recent Earthquakes API
			$.getJSON(earthquake, function(data) {
				// Iterate through result and setup a marker on each
				  $.each(data, function(key, val) {
						for (var i = 0; i < data.earthquakes.length; i++) {

							var myLatlng = new google.maps.LatLng(val[i].lat,val[i].lng);
							var marker = new google.maps.Marker({
							map: map,
							position: myLatlng,
							// Info on the quake
							title:'Magnitude: ' + val[i].magnitude + ' Depth: ' + val[i].depth + ' Date: ' + val[i].datetime
							});
						}
				  });
			});
		// Center map on user provided address and place marker
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
			animation: google.maps.Animation.DROP,
            position: results[0].geometry.location,
			title:address
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
  <div>
    <input id="address" type="textbox" size="30" value="11 E 26th St  New York, NY">
    <input type="button" value="Geocode" onclick="codeAddress()">
  </div>
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
	<!DOCTYPE html>

	<!--
	-- Bruno Galvao
	-- 12/11/11
	-- Bluewolf Coding Assignment
	-->

	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<title>bluewolf: Geocoding</title>

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script src="https://www.google.com/jsapi?key=ABQIAAAAdT5zMp4AEngQhIIbmLivDxSgdPsU9-HX8kv2A7G8dILD0bjJGRR_uzHyPCbgtq1iMfBtg69q9pwq2g" type="text/javascript"></script>

	<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
	<!-- getJSON function works in IE with jquery 1.3 not with 1.7.1
	-- Check if IE and set script source to jquery 1.3 -->
	<script type="text/javascript">
	$(document).ready(function(){

	if($.browser.msie)
	{
	var new_scr=document.createElement('script');
	new_scr.src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js";
	document.getElementsByTagName('head')[0].appendChild(new_scr);
	}
	});
	</script>
	<!-- Google Maps API -->
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCeQIme27M-qa2TpeHcnr5SdbLVknxvdz4&sensor=false">
	</script>

	<script type="text/javascript">

	var geocoder;
	var map;
	function initialize() {
	geocoder = new google.maps.Geocoder();
	// Center Google Map on following coordinates
	var latlng = new google.maps.LatLng(40.743502,-73.987409);
	var myOptions = {
	zoom: 6,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	// Create Google Map!
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	function codeAddress() {
	// Grab address specified by user
	var address = document.getElementById("address").value;
	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	// Calculate bounding box
	var north = results[0].geometry.location.lat() + 1;
	var south = results[0].geometry.location.lat() - 1;
	var east = results[0].geometry.location.lng() + 1;
	var west = results[0].geometry.location.lng() - 1;

	var earthquake = 'http://api.geonames.org/earthquakesJSON?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west + '&username=brunopgalvao';
	// Call Recent Earthquakes API
	$.getJSON(earthquake, function(data) {
	// Iterate through result and setup a marker on each
	$.each(data, function(key, val) {
	for (var i = 0; i < data.earthquakes.length; i++) {

	var myLatlng = new google.maps.LatLng(val[i].lat,val[i].lng);
	var marker = new google.maps.Marker({
	map: map,
	position: myLatlng,
	// Info on the quake
	title:'Magnitude: ' + val[i].magnitude + ' Depth: ' + val[i].depth + ' Date: ' + val[i].datetime
	});
	}
	});
	});
	// Center map on user provided address and place marker
	map.setCenter(results[0].geometry.location);
	var marker = new google.maps.Marker({
	map: map,
	animation: google.maps.Animation.DROP,
	position: results[0].geometry.location,
	title:address
	});
	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	</script>
	</head>
	<body onload="initialize()">
	<div>
	<input id="address" type="textbox" size="30" value="11 E 26th St New York, NY">
	<input type="button" value="Geocode" onclick="codeAddress()">
	</div>
	<div id="map_canvas" style="height:90%;top:30px"></div>
	</body>
	</html>