{"id":4114,"date":"2019-08-15T19:13:58","date_gmt":"2019-08-15T19:13:58","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4114"},"modified":"2022-09-08T04:18:52","modified_gmt":"2022-09-08T04:18:52","slug":"autocomplete-address-field-google-maps-javascript-api-places-library-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/","title":{"rendered":"Autocomplete Address Field using Google Maps JavaScript API with Places Library"},"content":{"rendered":"<p>Autocomplete input field allows to select a value from the pre-populated suggestions list. The autocomplete feature is very useful for the location search input field. It helps to select a proper location without typing the entire address. The autocomplete functionality can be easily added to the input field for text-based geographic location searches using Google Maps JavaScript API.<\/p>\n<p><b>Google Maps JavaScript API with Places library<\/b> provides an easy way to convert text input to a location search box using jQuery. The <b>location autocomplete textbox<\/b> can be used to get the user&#8217;s input of the address or location info. When the user starts typing in the location search field, the place predictions are listed under the input field. In this tutorial, we will show you how to add an autocomplete address field to the HTML form using Google Maps JavaScript API and jQuery. <\/p>\n<h2>jQuery Library<\/h2>\n<p>jQuery is used to trigger event handlers, so include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Google Maps JavaScript API<\/h2>\n<p>Google Maps JavaScript API and Places Library, are used to search for places and display location predictions in autocomplete box.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Load the Google Maps JavaScript API with Places library (libraries=places).<\/li>\n<li>Specify the API key in the key parameter.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp&amp;libraries=places&amp;key=<span style=\"border: 1px dashed #e91e63;color: #ec407a;\">Your_API_Key<\/span>\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><span class=\"note\">Note that:<\/span> Google <b>Maps JavaScript API<\/b> and <b>Places API<\/b> must be enabled for the Google API Console Project.<\/p>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/get-google-maps-javascript-api-key\/\">How to Get Google Maps JavaScript API Key<\/a><\/span><\/p>\n<h2>Find Places with Google Maps JavaScript API<\/h2>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following JavaScript code enables autocomplete places search feature in the specified input field using <code>Autocomplete()<\/code> method of the Google Maps Places library.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Based on the search term, the matched places are fetched from the Places library and append to the suggestions box.<\/li>\n<li>The latitude and longitude of the selected location are retrieved using <code>getPlace()<\/code> method.<\/li>\n<li>Set the selected latitude &#038; longitude,\n<ul>\n<li>to the hidden input field for getting value on form submission.<\/li>\n<li>to the element for showing on the web page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> searchInput = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'search_input'<\/span>;\r\n\r\n$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).ready(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> autocomplete;\r\n    autocomplete = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.places.Autocomplete((<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(searchInput)), {\r\n        types: [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'geocode'<\/span>],\r\n    });\r\n\t\r\n    google.maps.event.addListener(autocomplete, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'place_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> near_place = autocomplete.getPlace();\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'loc_lat'<\/span>).value = near_place.geometry.location.lat();\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'loc_long'<\/span>).value = near_place.geometry.location.lng();\r\n\t\t\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'latitude_view'<\/span>).innerHTML = near_place.geometry.location.lat();\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'longitude_view'<\/span>).innerHTML = near_place.geometry.location.lng();\r\n    });\r\n});\r\n<\/pre>\n<p>Remove latitude &#038; longitude on changing the input field value using jQuery.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>).on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'change'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#'<\/span>+searchInput, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'latitude_input'<\/span>).value = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'longitude_input'<\/span>).value = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n\t\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'latitude_view'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'longitude_view'<\/span>).innerHTML = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">''<\/span>;\r\n});<\/pre>\n<p><b>HTML Code:<\/b><br \/>\nCreate an input element where the autocomplete location search will be added.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Define the ID attribute in the element and specify this ID as a selector (<code>searchInput<\/code>) in JavaScript code.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Autocomplete location search input --&gt;<\/span> \r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-group\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>Location:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">label<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"search_input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Type address...\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"loc_lat\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"hidden\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"loc_long\"<\/span> \/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(108, 107, 90);\">&lt;!-- Display latitude and longitude --&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"latlong-view\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">b<\/span>&gt;<\/span>Latitude:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">b<\/span>&gt;<\/span> <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"latitude_view\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">b<\/span>&gt;<\/span>Longitude:<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">b<\/span>&gt;<\/span> <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"longitude_view\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">span<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>Country Restriction<\/h2>\n<p>You can add a country restriction on places search with componentRestrictions option in <b>Autocomplete()<\/b> method.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> autocomplete;\r\nautocomplete = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.places.Autocomplete((<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(searchInput)), {\r\n    types: [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'geocode'<\/span>],\r\n    componentRestrictions: {\r\n        country: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"USA\"<\/span>\r\n    }\r\n});<\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/autocomplete-places-search-box-google-maps-javascript-api\/\">Autocomplete Places Search Box using Google Maps JavaScript API<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>The location autocomplete field is very useful in the data creation form where the address information needs to be submitted. You can also use this autocomplete functionality in the location search field. Our autocomplete location search script helps you to add a user-friendly way to address input field in the web form. The autocomplete location textbox functionality can be enhanced easily as per your needs using jQuery.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Autocomplete input field allows to select a value from the pre-populated suggestions list. The autocomplete feature is very useful for the location search input field. It helps to select a proper location without typing the <\/p>\n","protected":false},"author":1,"featured_media":4120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[109],"tags":[20,103,13,15,35,16],"class_list":["post-4114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googlemap","tag-autocomplete-search","tag-geolocationapi","tag-google-api","tag-google-maps","tag-google-maps-api","tag-jquery","cat-109-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld<\/title>\n<meta name=\"description\" content=\"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-15T19:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-08T04:18:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Autocomplete Address Field using Google Maps JavaScript API with Places Library\",\"datePublished\":\"2019-08-15T19:13:58+00:00\",\"dateModified\":\"2022-09-08T04:18:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/\"},\"wordCount\":462,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png\",\"keywords\":[\"Autocomplete Search\",\"GeolocationAPI\",\"Google API\",\"Google Maps\",\"Google Maps API\",\"jQuery\"],\"articleSection\":[\"GoogleMap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/\",\"name\":\"Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png\",\"datePublished\":\"2019-08-15T19:13:58+00:00\",\"dateModified\":\"2022-09-08T04:18:52+00:00\",\"description\":\"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Autocomplete Address Field using Google Maps JavaScript API with Places Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld","description":"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld","og_description":"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.","og_url":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-08-15T19:13:58+00:00","article_modified_time":"2022-09-08T04:18:52+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Autocomplete Address Field using Google Maps JavaScript API with Places Library","datePublished":"2019-08-15T19:13:58+00:00","dateModified":"2022-09-08T04:18:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/"},"wordCount":462,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","keywords":["Autocomplete Search","GeolocationAPI","Google API","Google Maps","Google Maps API","jQuery"],"articleSection":["GoogleMap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/","url":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/","name":"Autocomplete Address Field using Google Maps JavaScript API with Places Library - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","datePublished":"2019-08-15T19:13:58+00:00","dateModified":"2022-09-08T04:18:52+00:00","description":"Add autocomplete location search feature to input field using Google Maps JavaScript API and Places library. Simple script to create autocomplete address input field to HTML form using jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","width":1366,"height":768,"caption":"add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/autocomplete-address-field-google-maps-javascript-api-places-library-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Autocomplete Address Field using Google Maps JavaScript API with Places Library"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/08\/add-autocomplete-address-field-google-maps-javascript-api-places-library-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-14m","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4114"}],"version-history":[{"count":8,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4114\/revisions"}],"predecessor-version":[{"id":5055,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4114\/revisions\/5055"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4120"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}