For map displaying and geolocation by address or other criteria on your web page you should download JavaScript Leaflet and plugin Leaflet.GeoSearch.

You can download the latest version of Leaflet on the site http://leafletjs.com/ using the link http://leafletjs.com/download.html

For downloading the original version of Leaflet.GeoSearch use links https://github.com/smeijer/L.GeoSearch or https://github.com/smeijer/L.GeoSearch/archive/master.zip

The standard archive Leaflet.GeoSearch is contained the search on the servers Google, OpenStreetMap, Nokia and others. You can easily expand this list using the examples.

The set of geolocation server for Leaflet.GeoSearch have the form:

Using

Example of use OpenStreetMap

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.OpenStreetMap()
}).addTo(map);

Example of use Google

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.Google()
}).addTo(map);

Example of use GISFile for the layer

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'Layer name'})
}).addTo(map);

Example of use GISFile for the project (maps)

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'map', name:'Name of the project'})
}).addTo(map);

You can fill in and other customizable parameters, such as: the installation position of panel search and displaying marker.

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.OpenStreetMap(),
     position: 'topcenter',
     showMarker: true
}).addTo(map);

Selecting a server geocoding

The variant which has been considered early provides using of only one supplier for the search. Presently, the service provides the possibility to use several services for searching.

For having a possibility to choose a server download and replace the Java script http://gisfile.com/js/l.control.geosearch.js and CSS file http://gisfile.com/css/l.geosearch.css

In the new version the parameter providers - the list of suppliers of geocoding and selected - the active of server defaults in the list has been added.

new L.Control.GeoSearch({

   selected: 0,
   providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
   {name:'Google', provider: new L.GeoSearch.Provider.Google()},
   {name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
}).addTo(map);

Updated the script can be used as the original (the examples above). 

Example of use

An example of the map display 

<html>

<head>

  <link rel="stylesheet" href="leaflet.css" />
  <!--[if lte IE 8]>
  <link rel="stylesheet" href="leaflet.ie.css" type="text/css" >
  <![endif]-->
  <script src="leaflet.js"></script>

  <script src="l.control.geosearch.js"></script>
  <link rel="stylesheet" href="l.geosearch.css" />

  <script src="l.geosearch.provider.openstreetmap.js"></script>
  <script src="l.geosearch.provider.google.js"></script>
  <script src="l.geosearch.provider.gisfile.js"></script> 

</head>

<body>

  <div id="map" style="width: 500px; height: 500px"></div>     

  <script type="text/javascript">

    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

    new L.Control.GeoSearch({
      searchLabel: 'The search string',
      notFoundMessage: 'Not found',
      position: 'topcenter',
      showMarker: true,
      selected: 0,
      providers: [{name:'GISFile', provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'world'})},
      {name:'Google', provider: new L.GeoSearch.Provider.Google()},
      {name:'OpenStreetMap', provider: new L.GeoSearch.Provider.OpenStreetMap()}]
    }).addTo(map);

</body>

</html>