Делаем селект стран, регионов, городов и городских районов с 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;
			}
		}
	});

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

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

  1. Ketonic+ (Кетоник+) – лучший жиросжигающий кето-комплекс на основе натуральных природных веществ. Позволяет в кратчайшие сроки сбросить нежелательный вес и восстановить баланс в организме без мучительных диет, изнурительных тренировок, побочных эффектов и проблем со здоровьем.

    Капсулы для похудения Ketonic+ разработаны таким образом, чтобы активизировать метаболические процессы в организме. Они направлены на регуляцию липидного, углеводного, белкового обмена, регуляцию синтеза лептина, восстановление биохимического равновесия синтеза лептина и эндокринных структур, контролирующих массу тела и уровень адипоцитов подкожного слоя.

    Будьте в великолепной форме без изнурительных диет и тренировок!
    похудеть за 30 дней
    Как похудеть?
    https://erickqutq89900.daneblogger.com/5195839/как-похудеть-в-ногахБудьте-в-великолепной-форме-без-изнурительных-диет-и-тренировок – похудеть как кореянки
    http://brooksxsxc46903.bloggerswise.com/6739644/как-похудеть-на-10-кг-за-месяцкак-похудеть-за-месяц – похудеть за месяц на 15 кг
    https://hectorgkjf45666.blogdosaga.com/4453620/как-похудеть-на-10-кгкак-похудеть-после-родов – как похудеть в ляшках

    $==r=+$

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *