Search control on Leaflet

Question

I would like to have search control for Leaflet, with suggestions to street addresses, like on this image from Google Maps:

Some of the plugins I tried (https://labs.easyblog.it/maps/leaflet-search/) don't give such results, when I typed some street name in them they offered either less or no suggestions. Here Google Maps responds properly for some random street name in my city.

Answer 1

You can try the leaflet-geosearch plugin.
The OSM demo seems to be what you are looking for.

There are other options you can find on leaflet's plugins page.

Please remember that the quality of the results depends on the underlying data,
Google works very hard on their data. That's why it's no longer free to use.

Also note that the OSM Nominatim API is not meant to use in production and should not be used for bulk geocoding.
Nominatim Usage Policy

Answer 2

A good tool is leaflet-control-geocoder (see demo with Google, Nominatim, Bing, and Mapbox services).

I prefer to use Mapbox for geocoding, it works much better with US addresses compared to Nominatim, at least in Connecticut. You will need to create an account and get the public API key. With their new pricing rolled out in June 2019, you get 100,000 geocoder requests per month for free.

First include the library in your HTML:

<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

You JavaScript will look something like that:

  L.Control.geocoder({
    position: 'topright',
    collapsed: false,
    placeholder: 'Search...',
    defaultMarkGeocode: true,
    geocoder: L.Control.Geocoder.mapbox('your-public-mapbox-key', {
      geocodingQueryParams: {
        country: 'us'
      }
    })
  });

Answer 3

// Agregar el Search Box 
L.Control.geocoder({
    position: "topright",
    placeholder: "Buscar Direccion",
    errorMessage: "Dirección no encontrada.",
    showResultIcons: true,
    defaultMarkGeocode: false
}).on('markgeocode', function(e) {
    posMarker(e.geocode.center);
    objMap.panTo(e.geocode.center);
}    ).addTo(objMap);