I am using the google map autoplete API to allow our customers to search for city, state, country formatted locations. Overall it is working well, but the problem is that while I am searching for a city, such as 'Toronto', it will give autoplete output with abbreviated state names, for example, Toronto ON, Canada, as in the image below :
Example :
I want autoplete output with state name rather than state code. For example, in the above image, it should instead say Toronto Ontario, Canada.
let me give another example : If I search for New York city, it will be output as: New York, NY, United States, but instead I would prefer that it be output as New York, New York, United States.
Is there some attribute that google provides us with which I could force the state names to be given in full, rather than abbreviated?
I have tried with some work-arounds to fix this issue, but I have so far failed to find a universal, working solution. Can anyone guide me on how best to acplish this?
I am using the google map autoplete API to allow our customers to search for city, state, country formatted locations. Overall it is working well, but the problem is that while I am searching for a city, such as 'Toronto', it will give autoplete output with abbreviated state names, for example, Toronto ON, Canada, as in the image below :
Example :
I want autoplete output with state name rather than state code. For example, in the above image, it should instead say Toronto Ontario, Canada.
let me give another example : If I search for New York city, it will be output as: New York, NY, United States, but instead I would prefer that it be output as New York, New York, United States.
Is there some attribute that google provides us with which I could force the state names to be given in full, rather than abbreviated?
I have tried with some work-arounds to fix this issue, but I have so far failed to find a universal, working solution. Can anyone guide me on how best to acplish this?
Share Improve this question edited Jul 6, 2017 at 5:00 Max von Hippel 2,9703 gold badges30 silver badges47 bronze badges asked Jun 23, 2017 at 6:44 Jigar7521Jigar7521 1,57914 silver badges29 bronze badges 2- look here stackoverflow./questions/33027785/… – Aref Ben Lazrek Commented Jul 2, 2017 at 21:41
- 1 @عارفبنالأزرق : I have already reviewed that link, but that is not solution of mine in this above case. – Jigar7521 Commented Jul 5, 2017 at 10:27
2 Answers
Reset to default 4 +25After doing a lot of research on the Google API docs, it seems like the feature you are requesting is not available natively within Google Maps API.
I worked up a work around below that works pretty well. It is a little plicated though, unfortunately.
The first part that is required is a function that loops through an array of international states / provinces with their short name.
JSON formatted international state / province abbreviations found here
function convertProvince(province, country) {
// Variable containing all the international provinces with their short code
var provinces = [{short:"AL",name:"Alabama",country:"United States"},{short:"AK",name:"Alaska",country:"United States"},{short:"AZ",name:"Arizona",country:"United States"},{short:"AR",name:"Arkansas",country:"United States"},{short:"CA",name:"California",country:"United States"},{short:"CO",name:"Colorado",country:"United States"},{short:"CT",name:"Connecticut",country:"United States"},{short:"DC",name:["District of Columbia","Washington DC","Washington D.C."],country:"United States"},{short:"DE",name:"Delaware",country:"United States"},{short:"FL",name:"Florida",country:"United States"},{short:"GA",name:"Georgia",country:"United States"},{short:"HI",name:"Hawaii",country:"United States"},{short:"ID",name:"Idaho",country:"United States"},{short:"IL",name:"Illinois",country:"United States"},{short:"IN",name:"Indiana",country:"United States"},{short:"IA",name:"Iowa",country:"United States"},{short:"KS",name:"Kansas",country:"United States"},{short:"KY",name:"Kentucky",country:"United States"},{short:"LA",name:"Louisiana",country:"United States"},{short:"ME",name:"Maine",country:"United States"},{short:"MD",name:"Maryland",country:"United States"},{short:"MA",name:"Massachusetts",country:"United States"},{short:"MI",name:"Michigan",country:"United States"},{short:"MN",name:"Minnesota",country:"United States"},{short:"MS",name:"Mississippi",country:"United States"},{short:"MO",name:"Missouri",country:"United States"},{short:"MT",name:"Montana",country:"United States"},{short:"NE",name:"Nebraska",country:"United States"},{short:"NV",name:"Nevada",country:"United States"},{short:"NH",name:"New Hampshire",country:"United States"},{short:"NJ",name:"New Jersey",country:"United States"},{short:"NM",name:"New Mexico",country:"United States"},{short:"NY",name:"New York",country:"United States"},{short:"NC",name:"North Carolina",country:"United States"},{short:"ND",name:"North Dakota",country:"United States"},{short:"OH",name:"Ohio",country:"United States"},{short:"OK",name:"Oklahoma",country:"United States"},{short:"OR",name:"Oregon",country:"United States"},{short:"PA",name:"Pennsylvania",country:"United States"},{short:"RI",name:"Rhode Island",country:"United States"},{short:"SC",name:"South Carolina",country:"United States"},{short:"SD",name:"South Dakota",country:"United States"},{short:"TN",name:"Tennessee",country:"United States"},{short:"TX",name:"Texas",country:"United States"},{short:"UT",name:"Utah",country:"United States"},{short:"VT",name:"Vermont",country:"United States"},{short:"VA",name:"Virginia",country:"United States"},{short:"WA",name:"Washington",country:"United States"},{short:"WV",name:"West Virginia",country:"United States"},{short:"WI",name:"Wisconsin",country:"United States"},{short:"WY",name:"Wyoming",country:"United States"},{short:"AS",name:"American Samoa",country:"United States"},{short:"GU",name:"Guam",country:"United States"},{short:"MP",name:"Northern Mariana Islands",country:"United States"},{short:"PR",name:"Puerto Rico",country:"United States"},{short:"UM",name:"United States Minor Outlying Islands",country:"United States"},{short:"VI",name:"Virgin Islands",country:"United States"},{short:"AB",name:"Alberta",country:"Canada"},{short:"BC",name:"British Columbia",country:"Canada"},{short:"MB",name:"Manitoba",country:"Canada"},{short:"NB",name:"New Brunswick",country:"Canada"},{short:"NL",name:["Newfoundland and Labrador","Newfoundland","Labrador"],country:"Canada"},{short:"NS",name:"Nova Scotia",country:"Canada"},{short:"NU",name:"Nunavut",country:"Canada"},{short:"NT",name:"Northwest Territories",country:"Canada"},{short:"ON",name:"Ontario",country:"Canada"},{short:"PE",name:"Prince Edward Island",country:"Canada"},{short:"QC",name:"Quebec",country:"Canada"},{short:"SK",name:"Saskatchewan",country:"Canada"},{short:"YT",name:"Yukon",country:"Canada"},{short:"ACT",name:"Australian Capital Territory",country:"Australia"},{short:"CX",name:"Christmas Island",country:"Australia"},{short:"CC",name:"Cocos Islands",alt:["Keeling Islands"],country:"Australia"},{short:"HM",name:"Heard Island and McDonald Islands",country:"Australia"},{short:"JBT",name:"Jervis Bay Territory",country:"Australia"},{short:"NSW",name:"New South Wales",country:"Australia"},{short:"NF",name:"Norfolk Island",country:"Australia"},{short:"NT",name:"Northern Territory",country:"Australia"},{short:"QLD",name:"Queensland",country:"Australia"},{short:"SA",name:"South Australia",country:"Australia"},{short:"TAS",name:"Tasmania",country:"Australia"},{short:"VIC",name:"Victoria",country:"Australia"},{short:"WA",name:"Western Australia",country:"Australia"},{short:"AG",name:"Aguascalientes",alt:["AGS"],country:"Mexico"},{short:"BC",name:"Baja California",alt:["BCN"],country:"Mexico"},{short:"BS",name:"Baja California Sur",alt:["BCS"],country:"Mexico"},{short:"CM",name:"Campeche",alt:["Camp","CAM"],country:"Mexico"},{short:"CS",name:"Chiapas",alt:["Chis","CHP"],country:"Mexico"},{short:"CH",name:"Chihuahua",alt:["Chih","CHH"],country:"Mexico"},{short:"MX",name:"Coahuila",alt:["Coah","COA"],country:"Mexico"},{short:"CL",name:"Colima",alt:["COL"],country:"Mexico"},{short:"DF",name:"Federal District",alt:["DIF"],country:"Mexico"},{short:"DG",name:"Durango",alt:["Dgo","DUR"],country:"Mexico"},{short:"GT",name:"Guanajuato",alt:["Gto","GUA"],country:"Mexico"},{short:"GR",name:"Guerrero",alt:["Gro","GRO"],country:"Mexico"},{short:"HG",name:"Hidalgo",alt:["Hgo","HID"],country:"Mexico"},{short:"JA",name:"Jalisco",alt:["Jal","JAL"],country:"Mexico"},{short:"ME",name:"Mexico",alt:["Edomex","MEX"],country:"Mexico"},{short:"MI",name:"Michoacán",alt:["Mich","MIC"],country:"Mexico"},{short:"MO",name:"Morelos",alt:["Mor","MOR"],country:"Mexico"},{short:"NA",name:"Nayarit",alt:["Nay","NAY"],country:"Mexico"},{short:"NL",name:"Nuevo León",alt:["NLE"],country:"Mexico"},{short:"OA",name:"Oaxaca",alt:["Oax","OAX"],country:"Mexico"},{short:"PU",name:"Puebla",alt:["Pue","PUE"],country:"Mexico"},{short:"QE",name:"Querétaro",alt:["Qro","QUE"],country:"Mexico"},{short:"QR",name:"Quintana Roo",alt:["Q Roo","ROO"],country:"Mexico"},{short:"SL",name:"San Luis Potosí",alt:["SLP"],country:"Mexico"},{short:"SI",name:"Sinaloa",alt:["SIN"],country:"Mexico"},{short:"SO",name:"Sonora",alt:["SON"],country:"Mexico"},{short:"TB",name:"Tabasco",alt:["TAB"],country:"Mexico"},{short:"TM",name:"Tamaulipas",alt:["Tamps","TAM"],country:"Mexico"},{short:"TL",name:"Tlaxcala",alt:["Tlax","TLA"],country:"Mexico"},{short:"VE",name:"Veracruz",alt:["VER"],country:"Mexico"},{short:"YU",name:"Yucatán",alt:["YUC"],country:"Mexico"},{short:"ZA",name:"Zacatecas",alt:["ZAC"],country:"Mexico"},{short:"渝",name:"重庆",english:"Chongqing",country:"China"},{short:"黑",name:"黑龙江",english:"Heilongjiang",country:"China"},{short:"吉",name:"吉林",english:"Jilin",country:"China"},{short:"琼",name:"海南",english:"Hainan",country:"China"},{short:"京",name:"北京",english:"Beijing",country:"China"},{short:"辽",name:"辽宁",english:"Liaoning",country:"China"},{short:"蒙",name:"内蒙古",english:"Inner Mongolia",alt:["Nei Menggu"],country:"China"},{short:"藏",name:"西藏",english:"Xizang",alt:["Tibet"],country:"China"},{short:"青",name:"青海",english:"Qinghai",country:"China"},{short:"宁",name:"宁夏",english:"Ningxia",country:"China"},{short:"新",name:"新疆",english:"Xinjiang",alt:["Uygur"],country:"China"},{short:"甘",name:"甘肃",english:"Gansu",country:"China"},{short:"冀",name:"河北",english:"Hebei",country:"China"},{short:"豫",name:"河南",english:"Henan",country:"China"},{short:"鄂",name:"湖北",english:"Hubei",country:"China"},{short:"湘",name:"湖南",english:"Hunan",country:"China"},{short:"鲁",name:"山东",english:"Shandong",country:"China"},{short:"苏",name:"江苏",english:"Jiangsu",country:"China"},{short:"皖",name:"安徽",english:"Anhui",country:"China"},{short:"晋",name:"山西",english:"Shanxi",country:"China"},{short:"陕",name:"陕西",english:"Shaanxi",country:"China"},{short:"川",name:"四川",english:"sichuan",country:"China"},{short:"滇",name:"云南",english:"Yunnan",country:"China"},{short:"黔",name:"贵州",english:"Guizhou",country:"China"},{short:"浙",name:"浙江",english:"Zhejiang",country:"China"},{short:"闽",name:"福建",english:"Fujian",country:"China"},{short:"桂",name:"广西",english:"Guangxi",country:"China"},{short:"沪",name:"上海",english:"Shanghai",country:"China"},{short:"津",name:"天津",english:"Tianjin",country:"China"},{short:"港",name:"香港",english:"Hongkong",alt:["Hong Kong"],country:"China"},{short:"澳",name:"澳门",english:"Macau",alt:["Macao"],country:"China"},{short:"台",name:"台湾",english:"Taiwan",country:"China"},{short:"赣",name:"江西",english:"Jiangxi",country:"China"},{short:"粤",name:"广东",english:"Guangdong",country:"China"},{short:"BW",name:"Baden-Württemberg",country:"Germany"},{short:"BY",name:"Bayern",country:"Germany"},{short:"BE",name:"Berlin",country:"Germany"},{short:"BB",name:"Brandenburg",country:"Germany"},{short:"HB",name:"Bremen",country:"Germany"},{short:"HH",name:"Hamburg",country:"Germany"},{short:"HE",name:"Hessen",country:"Germany"},{short:"MV",name:"Mecklenburg-Vorpommern",country:"Germany"},{short:"NI",name:"Niedersachsen",country:"Germany"},{short:"NW",name:"Nordrhein-Westfalen",country:"Germany"},{short:"RP",name:"Rheinland-Pfalz",country:"Germany"},{short:"SL",name:"Saarland",country:"Germany"},{short:"SN",name:"Sachsen",country:"Germany"},{short:"ST",name:"Sachsen-Anhalt",country:"Germany"},{short:"SH",name:"Schleswig-Holstein",country:"Germany"},{short:"TH",name:"Thüringen",country:"Germany"},{short:"DR",name:"Drenthe",country:"Netherlands"},{short:"FL",name:"Flevoland",country:"Netherlands"},{short:"FR",name:"Friesland",country:"Netherlands",alt:["Fryslân"]},{short:"GD",name:"Gelderland",country:"Netherlands"},{short:"GR",name:"Groningen",country:"Netherlands"},{short:"LB",name:"Limburg",country:"Netherlands"},{short:"NB",name:"Noord-Brabant",country:"Netherlands"},{short:"NH",name:"Noord-Holland",country:"Netherlands"},{short:"OV",name:"Overijssel",country:"Netherlands"},{short:"UT",name:"Utrecht",country:"Netherlands"},{short:"ZH",name:"Zuid-Holland",country:"Netherlands"},{short:"ZL",name:"Zeeland",country:"Netherlands"},{short:"ANT",name:"Antwerpen",country:"Belgium"},{short:"HAI",name:"Henegouwen",country:"Belgium",alt:["Hainaut"]},{short:"LIE",name:"Luik",country:"Belgium",alt:["Liège"]},{short:"LIM",name:"Limburg",country:"Belgium"},{short:"LUX",name:"Luxemburg",country:"Belgium"},{short:"NAM",name:"Namen",country:"Belgium"},{short:"OVL",name:"Oost-Vlaanderen",country:"Belgium"},{short:"VBR",name:"Vlaams-Brabant",country:"Belgium"},{short:"WBR",name:"Waals-Brabant",country:"Belgium"},{short:"WVL",name:"West-Vlaanderen",country:"Belgium"},{short:"ID-AC",name:"Special Region of Aceh",country:"Indonesia"},{short:"ID-BA",name:"Bali",country:"Indonesia"},{short:"ID-BB",name:"Bangka–Belitung Islands",country:"Indonesia"},{short:"ID-BT",name:"Banten",country:"Indonesia"},{short:"ID-BE",name:"Bengkulu",country:"Indonesia"},{short:"ID-JT",name:"Central Java",country:"Indonesia"},{short:"ID-KT",name:"Central Kalimantan",country:"Indonesia"},{short:"ID-ST",name:"Central Sulawesi",country:"Indonesia"},{short:"ID-JI",name:"East Java",country:"Indonesia"},{short:"ID-KI",name:"East Kalimantan",country:"Indonesia"},{short:"ID-NT",name:"East Nusa Tenggara",country:"Indonesia"},{short:"ID-GO",name:"Gorontalo",country:"Indonesia"},{short:"ID-JK",name:"Jakarta Special Capital Region",country:"Indonesia"},{short:"ID-JA",name:"Jambi",country:"Indonesia"},{short:"ID-LA",name:"Lampung",country:"Indonesia"},{short:"ID-MA",name:"Maluku",country:"Indonesia"},{short:"ID-KU",name:"North Kalimantan",country:"Indonesia"},{short:"ID-MU",name:"North Maluku",country:"Indonesia"},{short:"ID-SA",name:"North Sulawesi",country:"Indonesia"},{short:"ID-SU",name:"North Sumatra",country:"Indonesia"},{short:"ID-PA",name:"Special Region of Papua",country:"Indonesia"},{short:"ID-RI",name:"Riau",country:"Indonesia"},{short:"ID-KR",name:"Riau Islands",country:"Indonesia"},{short:"ID-SG",name:"Southeast Sulawesi",country:"Indonesia"},{short:"ID-KS",name:"South Kalimantan",country:"Indonesia"},{short:"ID-SN",name:"South Sulawesi",country:"Indonesia"},{short:"ID-SS",name:"South Sumatra",country:"Indonesia"},{short:"ID-JB",name:"West Java",country:"Indonesia"},{short:"ID-KB",name:"West Kalimantan",country:"Indonesia"},{short:"ID-NB",name:"West Nusa Tenggara",country:"Indonesia"},{short:"ID-PB",name:"Special Region of West Papua",country:"Indonesia"},{short:"ID-SR",name:"West Sulawesi",country:"Indonesia"},{short:"ID-SB",name:"West Sumatra",country:"Indonesia"},{short:"ID-YO",name:"Special Region of Yogyakarta",country:"Indonesia"},{short:"AP",name:"Andhra Pradesh",country:"India"},{short:"AR",name:"Arunachal Pradesh",country:"India"},{short:"AS",name:"Assam",country:"India"},{short:"BR",name:"Bihar",country:"India"},{short:"CT",name:"Chhattisgarh",country:"India"},{short:"GA",name:"Goa",country:"India"},{short:"GJ",name:"Gujarat",country:"India"},{short:"HR",name:"Haryana",country:"India"},{short:"HP",name:"Himachal Pradesh",country:"India"},{short:"JK",name:"Jammu and Kashmir",country:"India"},{short:"JH",name:"Jharkhand",country:"India"},{short:"KA",name:"Karnataka",country:"India"},{short:"KL",name:"Kerala",country:"India"},{short:"MP",name:"Madhya Pradesh",country:"India"},{short:"MH",name:"Maharashtra",country:"India"},{short:"MN",name:"Manipur",country:"India"},{short:"ML",name:"Meghalaya",country:"India"},{short:"MZ",name:"Mizoram",country:"India"},{short:"NL",name:"Nagaland",country:"India"},{short:"OR",name:"Odisha",country:"India"},{short:"PB",name:"Punjab",country:"India"},{short:"RJ",name:"Rajasthan",country:"India"},{short:"SK",name:"Sikkim",country:"India"},{short:"TN",name:"Tamil Nadu",country:"India"},{short:"TG",name:"Telangana",country:"India"},{short:"TR",name:"Tripura",country:"India"},{short:"UP",name:"Uttar Pradesh",country:"India"},{short:"UT",name:"Uttarakhand",country:"India"},{short:"WB",name:"West Bengal",country:"India"},{short:"AN",name:"Andaman and Nicobar Islands",country:"India"},{short:"CH",name:"Chandigarh",country:"India"},{short:"DN",name:"Dadra and Nagar Haveli",country:"India"},{short:"DD",name:"Daman and Diu",country:"India"},{short:"LD",name:"Lakshadweep",country:"India"},{short:"DL",name:"National Capital Territory of Delhi",country:"India"},{short:"PY",name:"Puducherry",country:"India"},{short:"C",name:"La Coruña",country:"Spain"},{short:"LU",name:"Lugo",country:"Spain"},{short:"BI",name:"Vizcaya",country:"Spain"},{short:"SS",name:"Guipúzcoa",country:"Spain"},{short:"HU",name:"Huesca",country:"Spain"},{short:"L",name:"Lérida",country:"Spain"},{short:"GI",name:"Gerona",country:"Spain"},{short:"B",name:"Barcelona",country:"Spain"},{short:"T",name:"Tarragona",country:"Spain"},{short:"CS",name:"Castellón",country:"Spain"},{short:"V",name:"Valencia",country:"Spain"},{short:"A",name:"Alicante",country:"Spain"},{short:"MU",name:"Murcia",country:"Spain"},{short:"Z",name:"Zaragoza",country:"Spain"},{short:"TE",name:"Teruel",country:"Spain"},{short:"CU",name:"Cuenca",country:"Spain"},{short:"AB",name:"Albacete",country:"Spain"},{short:"AL",name:"Almeria",country:"Spain"},{short:"GR",name:"Granada",country:"Spain"},{short:"MA",name:"Málaga",country:"Spain"},{short:"TF",name:"Tenerife",country:"Spain"},{short:"CA",name:"Cádiz",country:"Spain"},{short:"SE",name:"Sevilla",country:"Spain"},{short:"H",name:"Huelva",country:"Spain"},{short:"GC",name:"Las Palmas",country:"Spain"},{short:"M",name:"Madrid",country:"Spain"},{short:"BA",name:"Badajoz",country:"Spain"},{short:"CC",name:"Cáceres",country:"Spain"},{short:"TO",name:"Toledo",country:"Spain"},{short:"CR",name:"Ciudad Real",country:"Spain"},{short:"SA",name:"Salamanca",country:"Spain"},{short:"CO",name:"Córdoba",country:"Spain"},{short:"J",name:"Jaén",country:"Spain"},{short:"AV",name:"Ávila",country:"Spain"},{short:"VA",name:"Valladolid",country:"Spain"},{short:"ZA",name:"Zamora",country:"Spain"},{short:"VI",name:"Álava",country:"Spain"},{short:"SG",name:"Segovia",country:"Spain"},{short:"BU",name:"Burgos",country:"Spain"},{short:"PO",name:"Pontevedra",country:"Spain"},{short:"LE",name:"León",country:"Spain"},{short:"OU",name:"Orense",country:"Spain"},{short:"P",name:"Palencia",country:"Spain"},{short:"LO",name:"La Rioja",country:"Spain"},{short:"SO",name:"Soria",country:"Spain"},{short:"GU",name:"Guadalajara",country:"Spain"},{short:"AB",name:"Abia",country:"Nigeria"},{short:"FC",name:"Abuja",country:"Nigeria"},{short:"AD",name:"Adamawa",country:"Nigeria"},{short:"AK",name:"Akwa Ibom",country:"Nigeria"},{short:"AN",name:"Anambra",country:"Nigeria"},{short:"BA",name:"Bauchi",country:"Nigeria"},{short:"BY",name:"Bayelsa",country:"Nigeria"},{short:"BE",name:"Benue",country:"Nigeria"},{short:"BO",name:"Borno",country:"Nigeria"},{short:"CR",name:"Cross River",country:"Nigeria"},{short:"DE",name:"Delta",country:"Nigeria"},{short:"EB",name:"Ebonyi",country:"Nigeria"},{short:"ED",name:"Edo",country:"Nigeria"},{short:"EK",name:"Ekiti",country:"Nigeria"},{short:"EN",name:"Enugu",country:"Nigeria"},{short:"GO",name:"Gombe",country:"Nigeria"},{short:"IM",name:"Imo",country:"Nigeria"},{short:"JI",name:"Jigawa",country:"Nigeria"},{short:"KD",name:"Kaduna",country:"Nigeria"},{short:"KN",name:"Kano",country:"Nigeria"},{short:"KT",name:"Katsina",country:"Nigeria"},{short:"KE",name:"Kebbi",country:"Nigeria"},{short:"KO",name:"Kogi",country:"Nigeria"},{short:"KW",name:"Kwara",country:"Nigeria"},{short:"LA",name:"Lagos",country:"Nigeria"},{short:"NA",name:"Nasarawa",country:"Nigeria"},{short:"NI",name:"Niger",country:"Nigeria"},{short:"OG",name:"Ogun",country:"Nigeria"},{short:"ON",name:"Ondo",country:"Nigeria"},{short:"OS",name:"Osun",country:"Nigeria"},{short:"OY",name:"Oyo",country:"Nigeria"},{short:"PL",name:"Plateau",country:"Nigeria"},{short:"RI",name:"Rivers",country:"Nigeria"},{short:"SO",name:"Sokoto",country:"Nigeria"},{short:"TA",name:"Taraba",country:"Nigeria"},{short:"YO",name:"Yobe",country:"Nigeria"},{short:"ZA",name:"Zamfara",country:"Nigeria"},{short:"B",name:"Burgenland",country:"Austria"},{short:"K",name:"Kärnten",country:"Austria"},{short:"NÖ",name:"Niederösterreich",country:"Austria"},{short:"OÖ",name:"Oberösterreich",country:"Austria"},{short:"S",name:"Salzburg",country:"Austria"},{short:"ST",name:"Steiermark",country:"Austria"},{short:"T",name:"Tirol",country:"Austria"},{short:"V",name:"Vorarlberg",country:"Austria"},{short:"W",name:"Wien",country:"Austria"},{short:"AC",name:"Acre",country:"Brazil"},{short:"AL",name:"Alagoas",country:"Brazil"},{short:"AP",name:"Amapá",country:"Brazil"},{short:"AM",name:"Amazonas",country:"Brazil"},{short:"BA",name:"Bahia",country:"Brazil"},{short:"CE",name:"Ceará",country:"Brazil"},{short:"DF",name:"Distrito Federal",country:"Brazil"},{short:"ES",name:"Espírito Santo",country:"Brazil"},{short:"GO",name:"Goiás",country:"Brazil"},{short:"MA",name:"Maranhão",country:"Brazil"},{short:"MT",name:"Mato Grosso",country:"Brazil"},{short:"MS",name:"Mato Grosso do Sul",country:"Brazil"},{short:"MG",name:"Minas Gerais",country:"Brazil"},{short:"PA",name:"Pará",country:"Brazil"},{short:"PB",name:"Paraíba",country:"Brazil"},{short:"PR",name:"Paraná",country:"Brazil"},{short:"PE",name:"Pernambuco",country:"Brazil"},{short:"PI",name:"Piauí",country:"Brazil"},{short:"RJ",name:"Rio de Janeiro",country:"Brazil"},{short:"RN",name:"Rio Grande do Norte",country:"Brazil"},{short:"RS",name:"Rio Grande do Sul",country:"Brazil"},{short:"RO",name:"Rondônia",country:"Brazil"},{short:"RR",name:"Roraima",country:"Brazil"},{short:"SC",name:"Santa Catarina",country:"Brazil"},{short:"SP",name:"São Paulo",country:"Brazil"},{short:"SE",name:"Sergipe",country:"Brazil"},{short:"TO",name:"Tocantins",country:"Brazil"}];
// Loop through all the available provinces
for (var i = provinces.length - 1; i >= 0; i--) {
// Check if the name is an array (e.g. alternative names)
if (Array.isArray(provinces[i].name)) {
// If the province name 1st item matches the given one, return the abbreviation
if (provinces[i].name[0].toUpperCase() == province.toUpperCase() && provinces[i].country.toUpperCase() == country.toUpperCase()) {
return provinces[i].short;
}
}
else {
// If the province abbreviation matches the current one, return the full province name
if (provinces[i].short.toUpperCase() == province.toUpperCase() && provinces[i].country.toUpperCase() == country.toUpperCase()){
return provinces[i].name;
}
// If the province name matches the given one, return the abbreviation
if (provinces[i].name.toUpperCase() == province.toUpperCase && provinces[i].country.toUpperCase() == country.toUpperCase()) {
return provinces[i].short;
}
}
}
// Default return if no province found
return "";
}
Main function that attaches the Google Maps Autoplete API to the input field.
var init = function() {
// Input element where the searches will be entered
var input = document.getElementById('search'),
// Create a new Google Autoplete object
autoplete = new google.maps.places.AutopleteService(),
// Div element where the prediction will be inserted
predictions_container = document.getElementById("google_predictions"),
// Variable to control the Timeout delay when user enters text
searchWait;
// Add the keyup event listener to the input element
input.addEventListener('keyup', function() {
// Only run the autoplete if the input field has text in it
if (this.value.length === 0) {
// Reset the container of the autoplete predictions
predictions_container.innerHTML = "";
return;
}
// First clear the timeout before setting a new one
clearTimeout(searchWait);
// Create the delayed function to activate the Google Autoplete function
// searchValue = the value of the input field
searchWait = setTimeout(function(searchValue) {
return function() {
// Create a new event listener for when we receive the results from Google
autoplete.getPlacePredictions({input: searchValue}, function(predictions, status) {
// Only proceed if Google says it's all good
if (status === google.maps.places.PlacesServiceStatus.OK) {
// Variable that will contain the HTML to be put into the prediction
// container div
var newHTML = "";
// Loop through each of the predictions sent from Google
for (var i = predictions.length - 1; i >= 0; i--) {
// Regex to find the state abbreviation
var provincePattern = /,\s[A-Z]{1,2},/,
// Regex to find the country
countryPattern = /,\s[A-Za-z\s]{1,}$/,
// Get the prediction text
predictionText = predictions[i].description;
// If the prediction has a province abbreviation continue
if (provincePattern.test(predictionText)) {
// Get the abbreviated form of the province / state
var province = predictionText.match(provincePattern)[0];
// Get the country, and remove the preceeding ma and space
var country = predictionText.match(countryPattern)[0].slice(2);
// Remove the trailing ma
province = province.substring(0, province.length-1)
// Remove any extra mas or whitespace
province = province.replace(/[,|\s]/g, "");
// Replace the abbreviated province / state with with the full name of the province / state
// and add a ma before and after to correct the styling
var predictionText = predictionText.replace(provincePattern, ", " + convertProvince(province, country) + ",");
// ------------------------------------
// HERE'S THE CONVERTED PREDICTED TEXT
// ------------------------------------
// predictionText = each row of the predicted results sent from Google
console.log(predictionText);
}
// Create a new prediction row
var newRow = "<div class='prediction_rows'>" + predictionText + "</div>";
// New HTML to insert into the predictions container
newHTML = newHTML + newRow;
}
// Insert the new HTML into the predictions container
predictions_container.innerHTML = newHTML + "<img style='float: right' width='100' src='https://developers.google./places/documentation/images/powered-by-google-on-white.png' />";
}
});
}
} (this.value), 500);
});
}
init();
Main HTML:
<div class="container">
<input type="text" id="search" name="search" placeholder="search google places" style="width: 500px; margin-top: 50px;" autofocus>
<div class="predictions" id="google_predictions" style="width: 500px;">
</div>
I also made a quick little jQuery plugin to acplish this as well, which can be found here on Github
Using the jQuery plugin you can implement it like so:
$("#ID_OF_INPUT_FIELD").addressAutoplete();
The Google Places autoplete may be more appropriate for your needs (as opposed to using an address box). There is sample code in the link to the google docs link provided which I saved in this jsfiddle.
If you wanted to extend it a bit, there are other options suggested in the Google Maps API docs [for Autoplete] such as adding route possibilities/directions (fiddle).
Alternatively, you could just add a more simple search box that would autoplete (without the options/title etc.)
Code for Autoplete (with options):
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var card = document.getElementById('pac-card');
var input = document.getElementById('pac-input');
var types = document.getElementById('type-selector');
var strictBounds = document.getElementById('strict-bounds-selector');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autoplete = new google.maps.places.Autoplete(input);
// Bind the map's bounds (viewport) property to the autoplete object,
// so that the autoplete requests use the current map bounds for the
// bounds option in the request.
autoplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autoplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autoplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_ponents) {
address = [
(place.address_ponents[0] && place.address_ponents[0].short_name || ''),
(place.address_ponents[1] && place.address_ponents[1].short_name || ''),
(place.address_ponents[2] && place.address_ponents[2].short_name || '')
].join(' ');
}
infowindowContent.children['place-icon'].src = place.icon;
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-address'].textContent = address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autoplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autoplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
document.getElementById('use-strict-bounds')
.addEventListener('click', function() {
console.log('Checkbox clicked! New state=' + this.checked);
autoplete.setOptions({strictBounds: this.checked});
});
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autoplete search
</div>
<div id="type-selector" class="pac-controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-strict-bounds" value="">
<label for="use-strict-bounds">Strict Bounds</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap"
async defer></script>Hope this helps