oriolbx/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Geocoder Nominatim + Leaflet</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


  <style>
  	html,body,#map{
  		width: 100%;
  		height: 100%;

  	}
  	div#searchbox{
	  background-color: #d2eaef;
	  opacity: 0.5;
	  position: absolute;
	  top: 10px;
	  left: 50px;
	  width: auto;
	  height: auto;
	  padding: 10px;
    display: block;
    z-index: 9000;

  	}
  	div#searchbox input{
  		width: 200px;
  	}
    div#results{
      background: #FFF;
    }

  </style>

</head>
<body>
	<div id = "map"></div>
  <div id="searchbox">
  <input type="text" name="ad" value="" id="ad" size="10" />
  <button type="button" onclick="search()">Search</button>
  <div id="results"/>
</div>

	<script>
	var map;

    function search(){

      var address = $('#ad').val();


      $.getJSON( "http://nominatim.openstreetmap.org/search?q="+address+"&format=json&polygon=1&addressdetails=1&limit=5", function( data){

        var html = '<ul>';
          $.each(data, function(index,value){

            var lat = data[index].lat;
            var lon = data[index].lon;
            var bBox = data[index].boundingbox;
            var name = data[index].display_name;

            var bb0 = bBox[0]; //lat 1
            var bb1 = bBox[1]; //lat 2
            var bb2 = bBox[2]; //lon 1
            var bb3 = bBox[3]; //lon 2

            html = html + '<li><a href = "#" onclick= "selectAddress(' + bb0 + ',' + bb2 + ',' + bb1 + ',' + bb3 + ','  + lat + ',' + lon + ')">' + name +'</a></li>';

          });
        html = html + '</ul>';

        $('#results').html(html);
      });
    }
    function selectAddress(lat1, lon1, lat2, lon2, latPoint, lonPoint){
          var southWest = new L.latLng(lat1,lon1);
          var northEast = new L.latLng(lat2,lon2);
          var bounds = L.latLngBounds(southWest,northEast);
          map.fitBounds(bounds);
        }

  		var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{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>'
      });

      var map = L.map('map', {
          scrollWheelZoom: false,
          center: [30, -25],
          zoom: 3

        });
        map.addLayer(layer);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Geocoder Nominatim + Leaflet</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


	<style>
	html,body,#map{
	width: 100%;
	height: 100%;

	}
	div#searchbox{
	background-color: #d2eaef;
	opacity: 0.5;
	position: absolute;
	top: 10px;
	left: 50px;
	width: auto;
	height: auto;
	padding: 10px;
	display: block;
	z-index: 9000;

	}
	div#searchbox input{
	width: 200px;
	}
	div#results{
	background: #FFF;
	}

	</style>

	</head>
	<body>
	<div id = "map"></div>
	<div id="searchbox">
	<input type="text" name="ad" value="" id="ad" size="10" />
	<button type="button" onclick="search()">Search</button>
	<div id="results"/>
	</div>

	<script>
	var map;

	function search(){

	var address = $('#ad').val();


	$.getJSON( "http://nominatim.openstreetmap.org/search?q="+address+"&format=json&polygon=1&addressdetails=1&limit=5", function( data){

	var html = '<ul>';
	$.each(data, function(index,value){

	var lat = data[index].lat;
	var lon = data[index].lon;
	var bBox = data[index].boundingbox;
	var name = data[index].display_name;

	var bb0 = bBox[0]; //lat 1
	var bb1 = bBox[1]; //lat 2
	var bb2 = bBox[2]; //lon 1
	var bb3 = bBox[3]; //lon 2

	html = html + '<li><a href = "#" onclick= "selectAddress(' + bb0 + ',' + bb2 + ',' + bb1 + ',' + bb3 + ',' + lat + ',' + lon + ')">' + name +'</a></li>';

	});
	html = html + '</ul>';

	$('#results').html(html);
	});
	}
	function selectAddress(lat1, lon1, lat2, lon2, latPoint, lonPoint){
	var southWest = new L.latLng(lat1,lon1);
	var northEast = new L.latLng(lat2,lon2);
	var bounds = L.latLngBounds(southWest,northEast);
	map.fitBounds(bounds);
	}

	var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{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>'
	});

	var map = L.map('map', {
	scrollWheelZoom: false,
	center: [30, -25],
	zoom: 3

	});
	map.addLayer(layer);
	</script>
	</body>
	</html>