Для відображення карти і геолокації за адресою або іншими критеріями на Вашій ВЕБ-сторінці, необхідно завантажити JavaScript Leaflet і плагін Leaflet.GeoSearch.

Завантажити останню версію Leaflet  можна на сайті http://leafletjs.com/ за посиланням http://leafletjs.com/download.html

Завантажити оригінальну версію Leaflet.GeoSearch можна за посиланням https://github.com/smeijer/L.GeoSearch або https://github.com/smeijer/L.GeoSearch/archive/master.zip

У стандартному архіві Leaflet.GeoSearch міститься пошук на серверах Google, OpenStreetMap, Nokia та ін. Використовуючи приклади можна цей список легко розширити.

Набір серверів геолокації для Leaflet.GeoSearch мають вигляд:

Використання

Приклад використання OpenStreetMap

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

Приклад використання Google

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

Приклад використання GISFile для шару

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'layer', name:'Ім'я шару'})
}).addTo(map);

Приклад використання GISFile для проекту (карти)

new L.Control.GeoSearch({
     provider: new L.GeoSearch.Provider.GISFile( {type:'map', name:'Ім'я проекту'})
}).addTo(map);

Ви можете заповнити й інші параметри, що настроюються, такі як: установка позиції панелі пошуку і відображення маркера.

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

Вибір сервера геокодування

Розглянутий вище варіант передбачає використання тільки одного постачальника для пошуку, ми це трохи підправили. 

Для надання користувачу вибору сервера скачайте і замініть Java скрипт http://gisfile.com/js/l.control.geosearch.js та CSS файл http://gisfile.com/css/l.geosearch.css

У новій версії доданий параметр providers - список постачальників геокодування та selected - активний сервер за замовчуванням у списку.

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);

Оновлений скрипт можна використовувати і як оригінальний (приклади вище). 

Приклад використання

Приклад відображення карти 

<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: 'Рядок пошуку',
      notFoundMessage: 'Не знайдено',
      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>