środa, 10 lipca 2013

Autouzupełnianie miejscowości

Nie raz każdy z nas przygotowywał formularz, gdzie musimy wprowadzić np. nazwę miejscowości. Problem dla Użytkownika jest to, że przy wprowadzaniu, nie określa on nam, o którą miejsowość chodzi - przecież mamy kilka miejscowości na świecie o nazwie London, czy w samej Polsce występuje dużo miejscowości np. o nazwie Nowa Wieś.

Co zrobić, gdy chcemy za pomocą wprowadzonej nazwy wyświetlić ją na mapie (geolokalizacja), którą miejscowość wyświetli nam mapa?

Z pomocą przychodzi do nas kilka linijek kodu (Google Place API), który ułatwi nam wprowadzaniem nazwy miejscowości, które będą zawierały także nazwę stanu, hrabstwa, czy nazwę kraju w którym występuje.

Poniżej krótki kod do przetestowania:

Kod JavaScript:
function autocompleteLoad() {
 var input = document.getElementById('city');
 var options = {
  types: ['(cities)'],
 };
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

google.maps.event.addDomListener(window, 'load', autocompleteLoad);

Kod HTML
<input type="text" id="city" autocomplete="off" />

Następnie należy dodać link do Google Place API w sekcji head dokumentu:
http://maps.google.com/maps/api/js?sensor=false&libraries=places

I to cały, skomplikowany kod oraz demo: http://jsfiddle.net/kdevpl/uBGrn

Aktualizacja:
W komentarzach poniżej jeden z czytelników opublikował link (http://jsfiddle.net/cichy380/uBGrn/5) z zawężeniem wyników tylko dla polskich miast. Dzięki Marcin!

O autouzupełnianiu i innych możliwościach Google Place API znajdziemy więcej na https://developers.google.com/places/documentation/

9 komentarzy:

  1. Bardzo fajna sprawa, do tej pory robiłem tak, że w bazie trzymałem wszystkie miasta w Polsce ;) Ten sposób wydaje się w niektórych sytuacjach dużo lepszy.

    OdpowiedzUsuń
    Odpowiedzi
    1. Rzeczywiście, miałem styczność pracowania z bazą pobraną z GUS i jest ona dużo dokładniejsza i mamy pewność że wszystkich miejscowości

      Usuń
    2. Tak się składa, że są bazy komercyjne które działają w oparciu o dane z GUS oraz Poczty Polskiej.

      Miałem podobny problem i skorzystałem z bazy: http://madkom.pl/pl/baza-kodow-pocztowych

      Baza jest co prawda płatna, ale ma pełne dane i jest często aktualizowana. Co dla części projektów może być już bardzo istotne.

      Usuń
  2. Witam.
    A dało by się rozwinąć ten skrypt?
    O np. Wpisywanie kodu pocztowego albo wyświetlanie województwa?

    OdpowiedzUsuń
    Odpowiedzi
    1. Z tego co mi wiadomo do polskie kody pocztowe są niedostępne.

      Usuń
  3. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  4. A czy można ograniczyć podpowiadane miejscowości do danego kraju i województwa (w przypadku Polski)?

    OdpowiedzUsuń
    Odpowiedzi
    1. Poradziłem sobie z ograniczeniem do danego kraju.
      Przykład ograniczenia do miast z Polski: http://jsfiddle.net/cichy380/uBGrn/5/

      Usuń
    2. Dobre rozwiązanie, dodam Twój link na koniec wpisu, dla pozostałych zainteresowanych, co nie czytają komentarzy:)

      Usuń