{"id":217568,"date":"2014-11-07T00:00:00","date_gmt":"2014-11-06T23:00:00","guid":{"rendered":"https:\/\/blog.lewagon.com\/non-classifiee\/tuto-google-place-autocomplete\/"},"modified":"2014-11-07T00:00:00","modified_gmt":"2014-11-06T23:00:00","slug":"tuto-google-place-autocomplete","status":"publish","type":"post","link":"https:\/\/blog.lewagon.com\/fr\/skills\/tuto-google-place-autocomplete\/","title":{"rendered":"Google Place Autocomplete"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"

Apprenez rapidement \u00e0 installer Google Place Autocomplete dans vos formulaires comportant un champ adresse. Ces quelques lignes de code faciliteront grandement l’exp\u00e9rience de vos utilisateurs sur votre site. \u00c0 vous de jouer !<\/p>\n","protected":false},"author":1,"featured_media":217569,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[142],"type_de_post":[],"post-format":[175],"class_list":["post-217568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-web-fr","post-format-post-fr"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":null,"_yoast_wpseo_primary_type_de_post":null,"_yoast_wpseo_primary_post-format":null,"_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"Google Place Autocomplete | Le Wagon","_yoast_wpseo_opengraph-description":"Apprenez rapidement \u00e0 installer Google Place Autocomplete dans vos formulaires comportant un champ adresse. Ces quelques lignes de code faciliteront grandement l'exp\u00e9rience de vos utilisateurs sur votre site. \u00c0 vous de jouer !","_yoast_wpseo_twitter-title":"Google Place Autocomplete | Le Wagon","_yoast_wpseo_twitter-description":"Apprenez rapidement \u00e0 installer Google Place Autocomplete dans vos formulaires comportant un champ adresse. Ces quelques lignes de code faciliteront grandement l'exp\u00e9rience de vos utilisateurs sur votre site. \u00c0 vous de jouer !","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:32:13+00:00","gnpub_modified_count":null,"_encloseme":null,"_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/omrzygq9vcczwkw4hy8yromkwc5h.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/omrzygq9vcczwkw4hy8yromkwc5h.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":null,"_edit_lock":null,"_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"_yoast_wpseo_wordproof_timestamp":null,"_wpml_media_duplicate":"1","_thumbnail_id":"217569","_wpml_media_featured":"1","_wpml_word_count":"{\"total\":902,\"to_translate\":{\"en\":902,\"de\":902,\"ja\":902,\"pt-br\":902,\"es\":902}}","_last_translation_edit_mode":null,"_last_editor_used_jetpack":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":null,"_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"Apprenez rapidement \u00e0 installer Google Place Autocomplete dans vos formulaires comportant un champ adresse. Ces quelques lignes de code faciliteront grandement l'exp\u00e9rience de vos utilisateurs sur votre site. \u00c0 vous de jouer !","_yoast_wpseo_title":"Google Place Autocomplete | Le Wagon","contenu_de_larticle":"

Apprenez rapidement \u00e0 installer Google Place Autocomplete dans vos formulaires comportant un champ adresse. Ces quelques lignes de code faciliteront grandement l'exp\u00e9rience de vos utilisateurs sur votre site. \u00c0 vous de jouer !

<\/div>
<\/figcaption><\/figure><\/div>
Disclaimer<\/strong> Pour les codeurs \/ int\u00e9grateurs \/ dev de tous poils, jetez directement un oeil \u00e0 la documentation de @ssaunier<\/a> sur le repo github<\/a>. Pour les autres, nous d\u00e9taillerons l'ensemble de la proc\u00e9dure et expliciterons dans les quelques lignes ci-dessous.<\/div>

La logique<\/h3>

<\/div>
Le champ dans lequel l'utilisateur tape son adresse retourne une liste d'adresses possibles en fonction des quelques caract\u00e8res d\u00e9j\u00e0 \u00e9crits. Lorsque l'adresse souhait\u00e9e est s\u00e9lectionn\u00e9e, les donn\u00e9es la composant (rue, num\u00e9ro de voie ...) sont pars\u00e9es et inject\u00e9es dans les champs de la base de donn\u00e9es de votre service.

<\/div>
Voir la d\u00e9mo
<\/a>
<\/div>

API Key Google Map<\/h3>

<\/div>
Derni\u00e8re \u00e9tape du setup, r\u00e9cup\u00e9rez une cl\u00e9 API de Google Map afin d'obtenir un pool de 25.000 requ\u00eates API gratuites par jour. Pour cela, rendez-vous sur Google API Console<\/a> et activez Google Maps JavaScript API v3.

<\/div>
<\/figcaption><\/figure><\/div>
Dans le menu APIs & auth, cliquez sur l'onglet Credentials et activez votre Public API access sans oublier de pr\u00e9ciser la liste des domaines autoris\u00e9s \u00e0 effectuer des requ\u00eates (n'oubliez pas que votre quota est limit\u00e9 !).

<\/div>
<\/figcaption><\/figure><\/div>
Enfin, appellez l'API de Google Maps dans votre ficher HTML en ins\u00e9rant votre cl\u00e9 \u00e0 la fin en suivant l'exemple ci-dessous.

<\/div>
<!-- Include Google Maps JS API -->\n<script type=\"text\/javascript\"  src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?libraries=places&key=PUT_YOUR_OWN_KEY_HERE\"><\/script>\n\n<!-- Custom JS code to bind to Autocomplete API -->\n<!-- find it here: https:\/\/github.com\/lewagon\/google-place-autocomplete\/blob\/gh-pages\/autocomplete.js -->\n<!-- We'll detail this file in the article -->\n<script type=\"text\/javascript\" src=\"autocomplete.js\"><\/script><\/pre>

<\/div>
Le formulaire HTML<\/h3>

<\/div>
Pour notre exemple nous utiliserons un formulaire compos\u00e9 de 5 champs. Le premier, Address<\/em>, sera accessible \u00e0 l'utilisateur afin de lui permettre de saisir son adresse postale. Les 4 autres champs ; street_number, route, locality et country seront d\u00e9sactiv\u00e9s et ne serviront qu'\u00e0 recueillir la donn\u00e9e.

<\/div>
<form>\n  <label>Address<\/label>\n  <input id=\"user_input_autocomplete_address\" placeholder=\"Votre adresse...\">\n  <label>street_number<\/label>\n  <input id=\"street_number\" name=\"street_number\" disabled>\n  <label>route<\/label>\n  <input id=\"route\" name=\"route\" disabled>\n  <label>locality<\/label>\n  <input id=\"locality\" name=\"locality\" disabled>\n  <label>country<\/label>\n  <input id=\"country\" name=\"country\" disabled>\n<\/form><\/pre>

<\/div>
La recherche<\/h3>

<\/div>
function initializeAutocomplete(id) {  \n  var element = document.getElementById(id);  \n  \n  if (element) {    \n    var autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });\n    google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged);\n  }\n}<\/pre>

<\/div>
<input id=\"user_input_autocomplete_address\" placeholder=\"Start typing your address...\"><\/pre>

<\/div>
La m\u00e9thode initializeAutocomplete prend l'id de l'input sur lequel se greffer (soit dans notre cas user_input_autocomplete_address), cr\u00e9e un autocomplete, et \u00e9coute l'\u00e9v\u00e9nement place_changed. Lorsque cet \u00e9v\u00e8nement a lieu (c'est \u00e0 dire lorsque l'utilisateur choisit une adresse), alors la fonction de callback onPlaceChanged est appel\u00e9e. C'est dans cette derni\u00e8re que nous allons r\u00e9cup\u00e9rer les informations d\u00e9taill\u00e9es de l'adresse choisie

<\/div>
La r\u00e9cup\u00e9ration des donn\u00e9es<\/h3>

<\/div>
function onPlaceChanged() {  \n  var place = this.getPlace();\n  \/\/ console.log(place);  \/\/ Uncomment this line to view the full object returned by Google API.\n  \n  for (var i in place.address_components) {    \n    var component = place.address_components[i];    \n    \n    for (var j in component.types) {  \n      \/\/ Some types are [\"country\", \"political\"]      \n      var type_element = document.getElementById(component.types[j]);      \n      \n      if (type_element) {        \n        type_element.value = component.long_name;\n      }    \n    }  \n  }\n}<\/pre>

<\/div>
\u00c0 partir de ce point, les informations sont d\u00e9coup\u00e9es et son dispatch\u00e9es dans un tableau avec un syst\u00e8me cl\u00e9s\/valeurs.

<\/div>
{  \n  \"address_components\": [    \n    { \"long_name\": \"25\", \"types\": [ \"street_number\" ] },    \n    { \"long_name\": \"Petit Musc St\", \"types\": [ \"route\" ] },    \n    { \"long_name\": \"Paris\",         \"types\": [ \"locality\", \"political\" ] }    \n    \/\/ [...]  \n  ]\n}<\/pre>

<\/div>
Important<\/strong> Comme le montre l'extrait du JSON ci-dessus retourn\u00e9 par l'API de Google Maps sur la console, il est imp\u00e9ratif de respecter la d\u00e9nomination des inputs de votre formulaire HTML selon un syst\u00e8me cl\u00e9s\/valeurs bien pr\u00e9cis.

<\/div>
<form>\n  <input id=\"street_number\" name=\"street_number\" disabled>\n  <input id=\"route\" name=\"route\" disabled>\n  <input id=\"locality\" name=\"locality\" disabled>\n  <input id=\"country\" name=\"country\" disabled>\n<\/form><\/pre>

<\/div>
Dans la vie r\u00e9elle, il suffira de passer ces input en type=\"hidden\" pour qu'ils soient soumis \u00e0 l'envoi du formulaire. Vous r\u00e9cup\u00e9rerez ainsi l'adresse pr\u00e9d\u00e9coup\u00e9e correctement.

<\/div>
Ex\u00e9cuter le code<\/h3>

<\/div>
Afin de d\u00e9marrer le code il est n\u00e9cessaire d'ex\u00e9cuter initializeAutocompletelorsque Google est disponible et que la page est pr\u00eate.

<\/div>
google.maps.event.addDomListener(window, 'load', function() {  \n  initializeAutocomplete('user_input_autocomplete_address');\n});<\/pre>

<\/div>
Pour aller plus loin<\/h3>

<\/div>
Il est possible de customiser votre Autocomplete et de restreindre les recherches \u00e0 une zone g\u00e9ographie pr\u00e9cise voir \u00e0 un type exclusif de lieux (villes, business...).

<\/div>
Par exemple, gr\u00e2ce snippet ci-dessous, nous limitons les r\u00e9sultats aux business (types: ['establishment']) situ\u00e9s \u00e0 Paris et Londres en d\u00e9terminant leurs latitudes et longitudes respectives dans la variable defaultBounds. Pour en savoir plus, rendez-vous ici<\/a>.

<\/div>
var defaultBounds = new google.maps.LatLngBounds(  \n  new google.maps.LatLng(48.856614, 2.3522219000000177),  \n  new google.maps.LatLng(51.5073509, -0.12775829999998223)\n);\n\nvar input = document.getElementById('searchTextField');var options = {  \n bounds: defaultBounds,  \n types: ['establishment']\n};\n\nautocomplete = new google.maps.places.Autocomplete(input, options);<\/pre>

<\/div>
N'h\u00e9sitez pas \u00e0 laisser vos propres trucs et astuces dans les commentaires de cet article !

<\/div>
Liens utiles<\/h3>

<\/div>