Делаем селект стран, регионов, городов и городских районов с Google Maps JavaScript API

DL DT Хотел написать длинное вступительное слово с проклятиями в сторону составителей баз данных стран/городов, но потом все стёр. Ибо если кто-то сталкивался с данным вопросом, то он и так все это знает. А если не сталкивался, то попробую облегчить тебе жизнь, мой юный (или не очень) читатель.

В общем задача: Сделать форму выбора страны, региона, города и городского района. С подсказками и автокомлитом. Например вот такую:

Надо — так надо. Что понадобится для начала:

1) Подключаем Maps JavaScript API
2) Подключаем Jquery UI Autocomplete
3) Подключаем Бутстрап (на всякий случай)
4) Открываем блокнот (сарказм) и начинаем кодить

Это будет наша форма

<h4>Страна</h4>
<div class="ui-widget">
  <input class="form-control" id="country" type="text" placeholder="Начните вводить название страны">
</div>
<h4>Регион</h4>
<div class="ui-widget">
  <input class="form-control" id="region" type="text" placeholder="Начните вводить название региона">
</div>
<h4>Город</h4>
<div class="ui-widget">
  <input class="form-control" id="city" type="text" placeholder="Начните вводить название города">
</div>
<h4>Район</h4>
<div class="ui-widget">
  <input class="form-control" id="district" type="text" placeholder="Начните вводить название городского района">
</div>

Ну и собственно скрипт. В комментариях поясняется — где что происходит

	var log = function(e){//облегчаем себе жизнь
		return(console.log(e));
	}
	var autocomplete_service = new google.maps.places.AutocompleteService();//подключаем гуглосервис
	var counrty_val = ' ';//это сюда будем писать значения наших местоположений
	var region_val = ' ';
	var city_val = ' ';
	var district_val = ' ';
	var country_list = [];//массивы для всплывающих списков
	var region_list = [];
	var city_list = [];
	var district_list = [];
	$('#country').keyup(function(){
		country_val = $('#country').val();//получаем буквы из нашего инпута для страны
		if(country_val){
			var request = {
				input: country_val,
			};
			//log(request);
			autocomplete_service.getPlacePredictions(request, google_addresses_callback);//делаем запрос в гугл
			function google_addresses_callback(results, status) {
				if (status == google.maps.places.PlacesServiceStatus.OK) {
					var counter = 0;
					$.each(results, function (index, result) {
						//log(result);
						function in_array(value, array) {
							for (var i = 0; i < array.length; i++) {
								if (array[i] == value){
									country_list[counter] = result.description;//заполняем результатами из гугла список подсказок во всплывашке
									counter++;
									return true;
								}
							}
							return false;
						}
						if (in_array("country", result.types)) {
							//log(result);
						}
					});
				}
				else{
					log('no result');
				}
			}
			$("#country").autocomplete({//инициализируем Jquery UI Autocomplete
				source: country_list,
				focus: displayItem,
				select: displayItem,
				change: displayItem
			});
			function displayItem(event, ui) {//если автоподстановка произошла, забираем новое значение
				if(ui.item){
					country_val = ui.item.label;
				}
			}
		}
	});
	//в принципе дальше по аналогии с небольшими изменениями
	$('#region').keyup(function(){
		region_val = country_val+' '+$('#region').val();//дописываем к значению инпута, значение предведущего инпута
		var request = {
			input: region_val,
		};
		//log(request);
		autocomplete_service.getPlacePredictions(request, google_addresses_callback);
		function google_addresses_callback(results, status) {
			if (status == google.maps.places.PlacesServiceStatus.OK) {
				var counter = 0;
				$.each(results, function (index, result) {
					//log(result);
					function in_array(value, array) {
						for (var i = 0; i < array.length; i++) {
							if (array[i] == value){
								var formated = result.description;
								formated = formated.split(',');//отсекаем значение предведущего инпута. в подсказке оно нам не нужно
								region_list[counter] = formated[0];
								counter++;
								return true;
							}
						}
							return false;
					}
					if (in_array("administrative_area_level_1", result.types)) {
						//log(result);
					}
				});
			}
			else{
				log('no result')
			}
		}
		$( "#region" ).autocomplete({
			source: region_list,
			focus: displayItem,
			select: displayItem,
			change: displayItem
		});
		function displayItem(event, ui) {
			if(ui.item){
				region_val = ui.item.label;
			}
		}
	});
	$('#city').keyup(function(){
		city_val = region_val+' '+$('#city').val();
		var request = {
			input: city_val,
		};
		//log(request);
		autocomplete_service.getPlacePredictions(request, google_addresses_callback);
		function google_addresses_callback(results, status) {
			if (status == google.maps.places.PlacesServiceStatus.OK) {
				var counter = 0;
				$.each(results, function (index, result) {
					//log(result);
					function in_array(value, array) {
						for (var i = 0; i < array.length; i++) {
							if (array[i] == value){
								var formated = result.description;
								formated = formated.split(',');
								city_list[counter] = formated[0];
								counter++;
								return true;
							}
						}
							return false;
					}
					if (in_array("locality", result.types)) {
						//log(result);
					}
				});
			}
			else{
				log('no result')
			}
		}
		$( "#city" ).autocomplete({
			source: city_list,
			focus: displayItem,
			select: displayItem,
			change: displayItem
		});
		function displayItem(event, ui) {
			if(ui.item){
				city_val = ui.item.label;
			}
		}
	});
	$('#district').keyup(function(){
		district_val = city_val+' '+$('#district').val();
		var request = {
			input: district_val,
		};
		//log(request);
		autocomplete_service.getPlacePredictions(request, google_addresses_callback);
		function google_addresses_callback(results, status) {
			if (status == google.maps.places.PlacesServiceStatus.OK) {
				var counter = 0;
				$.each(results, function (index, result) {
					//log(result);
					function in_array(value, array) {
						for (var i = 0; i < array.length; i++) {
							if (array[i] == value){
								var formated = result.description;
								formated = formated.split(',');
								district_list[counter] = formated[0];
								counter++;
								return true;
							}
						}
							return false;
					}
					if (in_array("sublocality_level_2", result.types)) {
						//log(result);
					}
				});
			}
			else{
				log('no result')
			}
		}
		$( "#district" ).autocomplete({
			source: district_list,
			focus: displayItem,
			select: displayItem,
			change: displayItem
		});
		function displayItem(event, ui) {
			if(ui.item){
				district_val = ui.item.label;
			}
		}
	});

Вы великолепны!

Добавить комментарий