{"id":2733,"date":"2017-08-29T19:47:50","date_gmt":"2017-08-29T19:47:50","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2733"},"modified":"2017-08-29T19:51:59","modified_gmt":"2017-08-29T19:51:59","slug":"autocomplete-location-search-box-google-maps-javascript-api-jquery-ui","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/","title":{"rendered":"Autocomplete Location Search using Google Maps JavaScript API and jQuery"},"content":{"rendered":"<p>Location search box helps to find the exact location that the user wants to provide. Generally, HTML input box is used to get the address from the user, where the user needs to enter their address manually. But if you want to make location input box more user-friendly, autocomplete location search box is a great option. Using <a href=\"https:\/\/www.codexworld.com\/autocomplete-places-search-box-google-maps-javascript-api\/\">autocomplete address search box<\/a>, the user can select their exact location on Google Map.<\/p>\n<p>In this tutorial, we will show you how to implement autocomplete location search box functionality in the web application using <b>Google Maps JavaScript API<\/b>, jQuery and jQuery UI. In the example script, we will implement the following functionalities.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Autocomplete location search box.<\/li>\n<li>Point the location with a marker on Google map.<\/li>\n<li>Change marker position on location change.<\/li>\n<li>Get latitude, longitude, and address of the selected location.<\/li>\n<li>Location change by marker drag&#038;drop.<\/li>\n<\/ul>\n<h2>Bootstrap Library<\/h2>\n<p>The example script uses Bootstrap library to styling the search input field and button. If you don&#8217;t want to use Bootstrap library, not need to include it.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">link<\/span> <span style=\"color:#bf4f24\">rel<\/span>=<span style=\"color:#0b6125\">\"stylesheet\"<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\"<\/span>>\r\n<\/pre>\n<h2>jQuery &#038; jQuery UI Library<\/h2>\n<p>The jQuery is used to get and set the location information, so include the jQuery library. And the jQuery UI library is used to add autocomplete feature to the location search box.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n    \r\n&lt;<span style=\"color:#bf4f24\">link<\/span> <span style=\"color:#bf4f24\">rel<\/span>=<span style=\"color:#0b6125\">\"stylesheet\"<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.12.1\/themes\/smoothness\/jquery-ui.css\"<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<h2>Google Maps JavaScript API<\/h2>\n<p>Google Maps JavaScript API is used to get the location info (address, latitude, and longitude) and display map. You need to create an API key in Google Developers Console and enable Google Maps Geocoding API library. Specify this <b>API key<\/b> in API URL for using the Google Maps JavaScript API.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\/javascript\"<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>See this step-by-step instruction to get your own API key \u2013 <a href=\"https:\/\/www.codexworld.com\/get-google-maps-javascript-api-key\/\">How to Get Google Maps JavaScript API Key<\/a><\/p>\n<h2>JavaScript Code<\/h2>\n<p>The JavaScript code has the following four sections.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <code>initialize()<\/code> method creates a Google map and points a location with a marker on Google map. Initially, a default position is shown on the map. But if any location is selected by the autocomplete box, this position will be shown on the Google Map. Also, the respective address, latitude, and longitude are display under the Google Map.<\/li>\n<li>In the second section, the autocomplete functionality is added to the input box (<code>search_location<\/code>). On selecting an address from autocomplete box, the respective location will be shown on the Google map with a marker. Also, the respective address, latitude, and longitude are display under the Google Map.<\/li>\n<li>The third section is triggered when the Locate button (<code>get_map<\/code>) is clicked. The Geo location data is fetched based on the given address and shows on the Google map with a marker. Also, the respective address, latitude, and longitude are display under the Google Map.<\/li>\n<li>The fourth section is used to change the location when the marker position is changed by drag &#038; drop.<\/li>\n<\/ul>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span>>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> geocoder;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> map;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> marker;\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">\/*\r\n * Google Map with marker\r\n *\/<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">initialize<\/span>() {\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> initialLat <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_latitude<\/span>')<span style=\"color:#693a17\">.val<\/span>();\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> initialLong <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_longitude<\/span>')<span style=\"color:#693a17\">.val<\/span>();\r\n    initialLat <span style=\"color:#794938\">=<\/span> initialLat?initialLat:<span style=\"color:#811f24;font-weight:700\">36.169648<\/span>;\r\n    initialLong <span style=\"color:#794938\">=<\/span> initialLong?initialLong:<span style=\"color:#794938\">-<\/span><span style=\"color:#811f24;font-weight:700\">115.141000<\/span>;\r\n\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> latlng <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.LatLng(initialLat, initialLong);\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> options <span style=\"color:#794938\">=<\/span> {\r\n        zoom: <span style=\"color:#811f24;font-weight:700\">16<\/span>,\r\n        center: latlng,\r\n        mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    };\r\n\r\n    map <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Map(<span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"geomap\"<\/span>), options);\r\n\r\n    geocoder <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Geocoder();\r\n\r\n    marker <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Marker({\r\n        map: map,\r\n        draggable: <span style=\"color:#811f24;font-weight:700\">true<\/span>,\r\n        position: latlng\r\n    });\r\n\r\n    google.maps.<span style=\"color:#691c97\">event<\/span>.addListener(marker, <span style=\"color:#0b6125\">\"dragend\"<\/span>, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> point <span style=\"color:#794938\">=<\/span> marker.getPosition();\r\n        map.panTo(point);\r\n        geocoder.geocode({<span style=\"color:#0b6125\">'latLng'<\/span>: marker.getPosition()}, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (results, status) {\r\n            <span style=\"color:#794938\">if<\/span> (status <span style=\"color:#794938\">==<\/span> google.maps.GeocoderStatus.OK) {\r\n                map.setCenter(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].geometry.<span style=\"color:#b4371f\">location<\/span>);\r\n                marker.setPosition(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].geometry.<span style=\"color:#b4371f\">location<\/span>);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_addr<\/span>')<span style=\"color:#693a17\">.val<\/span>(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].formatted_address);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_latitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lat());\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_longitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lng());\r\n            }\r\n        });\r\n    });\r\n\r\n}\r\n\r\n<span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">document<\/span>)<span style=\"color:#693a17\">.ready<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/load google map<\/span>\r\n    initialize();\r\n    \r\n    <span style=\"color:#5a525f;font-style:italic\">\/*\r\n     * autocomplete location search\r\n     *\/<\/span>\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> PostCodeid <span style=\"color:#794938\">=<\/span> <span style=\"color:#0b6125\">'#search_location'<\/span>;\r\n    <span style=\"color:#691c97\">$<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n        <span style=\"color:#794938\">$<\/span>(PostCodeid).autocomplete({\r\n            <span style=\"color:#bf4f24\">source<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (request, response) {\r\n                geocoder.geocode({\r\n                    <span style=\"color:#0b6125\">'address'<\/span>: request.term\r\n                }, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (results, status) {\r\n                    response(<span style=\"color:#794938\">$<\/span>.map(results, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (item) {\r\n                        <span style=\"color:#794938\">return<\/span> {\r\n                            label: item.formatted_address,\r\n                            value: item.formatted_address,\r\n                            lat: item.geometry.<span style=\"color:#b4371f\">location<\/span>.lat(),\r\n                            lon: item.geometry.<span style=\"color:#b4371f\">location<\/span>.lng()\r\n                        };\r\n                    }));\r\n                });\r\n            },\r\n            <span style=\"color:#bf4f24\">select<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (event, ui) {\r\n                <span style=\"color:#794938\">$<\/span>(<span style=\"color:#0b6125\">'.search_addr'<\/span>).val(ui.item.<span style=\"color:#b4371f\">value<\/span>);\r\n                <span style=\"color:#794938\">$<\/span>(<span style=\"color:#0b6125\">'.search_latitude'<\/span>).val(ui.item.lat);\r\n                <span style=\"color:#794938\">$<\/span>(<span style=\"color:#0b6125\">'.search_longitude'<\/span>).val(ui.item.lon);\r\n                <span style=\"color:#a71d5d;font-style:italic\">var<\/span> latlng <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.LatLng(ui.item.lat, ui.item.lon);\r\n                marker.setPosition(latlng);\r\n                initialize();\r\n            }\r\n        });\r\n    });\r\n    \r\n    <span style=\"color:#5a525f;font-style:italic\">\/*\r\n     * Point location on google map\r\n     *\/<\/span>\r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.get_map<\/span>')<span style=\"color:#693a17\">.click<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span> (e) {\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> address <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">$<\/span>(PostCodeid)<span style=\"color:#693a17\">.val<\/span>();\r\n        geocoder.geocode({<span style=\"color:#0b6125\">'address'<\/span>: address}, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (results, status) {\r\n            <span style=\"color:#794938\">if<\/span> (status <span style=\"color:#794938\">==<\/span> google.maps.GeocoderStatus.OK) {\r\n                map.setCenter(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].geometry.<span style=\"color:#b4371f\">location<\/span>);\r\n                marker.setPosition(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].geometry.<span style=\"color:#b4371f\">location<\/span>);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_addr<\/span>')<span style=\"color:#693a17\">.val<\/span>(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].formatted_address);\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_latitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lat());\r\n                <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_longitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lng());\r\n            } <span style=\"color:#794938\">else<\/span> {\r\n                <span style=\"color:#693a17\">alert<\/span>(<span style=\"color:#0b6125\">\"Geocode was not successful for the following reason: \"<\/span> <span style=\"color:#794938\">+<\/span> status);\r\n            }\r\n        });\r\n        e.preventDefault();\r\n    });\r\n\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/Add listener to marker for reverse geocoding<\/span>\r\n    google.maps.<span style=\"color:#691c97\">event<\/span>.addListener(marker, <span style=\"color:#0b6125\">'drag'<\/span>, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> () {\r\n        geocoder.geocode({<span style=\"color:#0b6125\">'latLng'<\/span>: marker.getPosition()}, <span style=\"color:#a71d5d;font-style:italic\">function<\/span> (results, status) {\r\n            <span style=\"color:#794938\">if<\/span> (status <span style=\"color:#794938\">==<\/span> google.maps.GeocoderStatus.OK) {\r\n                <span style=\"color:#794938\">if<\/span> (results[<span style=\"color:#811f24;font-weight:700\">0<\/span>]) {\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_addr<\/span>')<span style=\"color:#693a17\">.val<\/span>(results[<span style=\"color:#811f24;font-weight:700\">0<\/span>].formatted_address);\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_latitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lat());\r\n                    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.search_longitude<\/span>')<span style=\"color:#693a17\">.val<\/span>(marker.getPosition().lng());\r\n                }\r\n            }\r\n        });\r\n    });\r\n});\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>If you want to add restriction by the country, specify <code>componentRestrictions<\/code> option in <code>geocode()<\/code> method. For example, you want to show the addresses only from the USA on autocomplete box, the <code>geocoder.geocode()<\/code> need to be defined like the below.<\/p>\n<pre>geocoder.geocode({\r\n    <span style=\"color:#0b6125\">'address'<\/span>: request.term,\r\n    componentRestrictions: {country: <span style=\"color:#0b6125\">\"us\"<\/span>}\r\n})\r\n<\/pre>\n<h2>HTML Code<\/h2>\n<p>The input field is used to search address and the <b>Locate<\/b> button is used to get the location information based on the given address. The Google Map is displayed under the <code>geomap<\/code> div. The rest of the HTML is used to display the location information (address, latitude, and longitude).<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">&lt;!-- search input box --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">form<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-group input-group\"<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"search_location\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"form-control\"<\/span> <span style=\"color:#bf4f24\">placeholder<\/span>=<span style=\"color:#0b6125\">\"Search location\"<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"input-group-btn\"<\/span>>\r\n        &lt;<span style=\"color:#bf4f24\">button<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"btn btn-default get_map\"<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"submit\"<\/span>>\r\n            Locate\r\n        &lt;\/<span style=\"color:#bf4f24\">button<\/span>>\r\n    &lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">form<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- display google map --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"geomap\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- display selected location information --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">h4<\/span>>Location Details&lt;\/<span style=\"color:#bf4f24\">h4<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span>>Address: &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"search_addr\"<\/span> <span style=\"color:#bf4f24\">size<\/span>=<span style=\"color:#0b6125\">\"45\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span>>Latitude: &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"search_latitude\"<\/span> <span style=\"color:#bf4f24\">size<\/span>=<span style=\"color:#0b6125\">\"30\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n&lt;<span style=\"color:#bf4f24\">p<\/span>>Longitude: &lt;<span style=\"color:#bf4f24\">input<\/span> <span style=\"color:#bf4f24\">type<\/span>=<span style=\"color:#0b6125\">\"text\"<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"search_longitude\"<\/span> <span style=\"color:#bf4f24\">size<\/span>=<span style=\"color:#0b6125\">\"30\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">p<\/span>>\r\n<\/pre>\n<h2>CSS Code<\/h2>\n<p>The following CSS sets the height and width of the Google Map div.<\/p>\n<pre><span style=\"color:#bf4f24\">#geomap<\/span>{\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">height<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">400<span style=\"color:#794938\">px<\/span><\/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 example code shows how you can implement an autocomplete location search input box and get latitude &#038; longitude. You can easily extend the functionality of this script as per your needs. If you want to store the user location info (address, latitude, and longitude) in the database, use AJAX to send the location data to the PHP file and insert into the database.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Location search box helps to find the exact location that the user wants to provide. Generally, HTML input box is used to get the address from the user, where the user needs to enter their <\/p>\n","protected":false},"author":1,"featured_media":2734,"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":[35,16,17],"class_list":["post-2733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googlemap","tag-google-maps-api","tag-jquery","tag-jquery-ui","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 Location Search using Google Maps JavaScript API and jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search 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-location-search-box-google-maps-javascript-api-jquery-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Autocomplete Location Search using Google Maps JavaScript API and jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search using jQuery.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/\" \/>\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=\"2017-08-29T19:47:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-29T19:51:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Autocomplete Location Search using Google Maps JavaScript API and jQuery\",\"datePublished\":\"2017-08-29T19:47:50+00:00\",\"dateModified\":\"2017-08-29T19:51:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/\"},\"wordCount\":640,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png\",\"keywords\":[\"Google Maps API\",\"jQuery\",\"jQuery UI\"],\"articleSection\":[\"GoogleMap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/\",\"name\":\"Autocomplete Location Search using Google Maps JavaScript API and jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png\",\"datePublished\":\"2017-08-29T19:47:50+00:00\",\"dateModified\":\"2017-08-29T19:51:59+00:00\",\"description\":\"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search using jQuery.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Autocomplete Location Search using Google Maps JavaScript API and jQuery\"}]},{\"@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 Location Search using Google Maps JavaScript API and jQuery - CodexWorld","description":"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search 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-location-search-box-google-maps-javascript-api-jquery-ui\/","og_locale":"en_US","og_type":"article","og_title":"Autocomplete Location Search using Google Maps JavaScript API and jQuery - CodexWorld","og_description":"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search using jQuery.","og_url":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-08-29T19:47:50+00:00","article_modified_time":"2017-08-29T19:51:59+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-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":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Autocomplete Location Search using Google Maps JavaScript API and jQuery","datePublished":"2017-08-29T19:47:50+00:00","dateModified":"2017-08-29T19:51:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/"},"wordCount":640,"commentCount":1,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png","keywords":["Google Maps API","jQuery","jQuery UI"],"articleSection":["GoogleMap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/","url":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/","name":"Autocomplete Location Search using Google Maps JavaScript API and jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png","datePublished":"2017-08-29T19:47:50+00:00","dateModified":"2017-08-29T19:51:59+00:00","description":"Implement autocomplete location search box and display google map with a marker using Google Maps JavaScript API and jQuery UI. Get latitude and longitude from autocomplete search using jQuery.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png","width":1366,"height":768,"caption":"autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Autocomplete Location Search using Google Maps JavaScript API and jQuery"}]},{"@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\/2017\/08\/autocomplete-location-search-box-google-maps-javascript-api-jquery-ui-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-I5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2733","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=2733"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2733\/revisions"}],"predecessor-version":[{"id":2737,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2733\/revisions\/2737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2734"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}