{"id":14392,"date":"2015-01-14T13:51:03","date_gmt":"2015-01-14T13:51:03","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=14392"},"modified":"2024-04-04T08:34:48","modified_gmt":"2024-04-04T08:34:48","slug":"can-i-add-a-google-interactive-map-on-my-online-form","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/","title":{"rendered":"Can I add a Google interactive map to my 123FormBuilder form?"},"content":{"rendered":"\n<p>Yes, you can add a Google interactive map to your web form. Adding an interactive map to your online form is a great way to enhance user experience by providing a visual representation of locations.<\/p>\n\n\n\n<p>Let&#8217;s say you own a travel agency and you regularly create <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/free-form-templates\/gallery-reservation\/travel-forms\/\">online reservation forms<\/a> for different tour packages and destinations. By incorporating an interactive map into your forms, you can not only showcase the accommodation options but also help travelers explore the proximity to understand how they can reach their destination and navigate the local area upon their arrival. Thus, travelers can seamlessly explore the location without leaving the online form.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setting-up-the-google-map-field\">Setting up the Google map field<\/h2>\n\n\n\n<p>In your <a href=\"\/\">form builder<\/a> account, select your form and go to the <b>Create<\/b> tab. There, you will find the <b>Location on Google map <\/b>field in the <b>Contact details<\/b> section.<\/p>\n\n\n\n<p>Drag and drop it on the form and head over to the right-side panel to customize the map.<\/p>\n\n\n\n<p>To use the <b>Location on Google map<\/b> field, you will first need to create a Google API Key. Keep in mind that Google\u2019s Map service will require you to set up a billing account for the API usage. You can check their pricing system <a href=\"https:\/\/mapsplatform.google.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">here<\/a>. For more information about your Google API Key, read <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/configure-google-maps-with-your-api\/\">this guide<\/a>.<\/p>\n\n\n\n<p>Once you have your Google API Key is time to configure the map. In the <b>Default Map <\/b>field, type in the address of a location and you will be able to see the changes on the map instantly. A marker will be displayed on the map.<\/p>\n\n\n\n<p>By default, the map is set as interactive, meaning that users can navigate through the map and also view the map in satellite mode. You can also adjust the zoom level and set it between 1-22 pixels. The Google map is interactive only in preview\/view mode.<\/p>\n\n\n\n<p>If you don&#8217;t require the Google interactive map, but a static Google map, return to its Edit panel and uncheck the option <b>Interactive<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png\" alt=\"Interactive Google Maps\" class=\"wp-image-47354\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-300x170.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-768x435.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1536x871.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50.png 1895w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\" \/>\n\n\n\n<p><b>Related articles<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/configure-google-maps-with-your-api\/\">Configure Google Maps with your API<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-retrieve-an-address-and-coordinates-from-google-maps\/\">How to retrieve an address and coordinates from the Google maps field<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yes, you can add a Google interactive map to your web form. Adding an interactive map to your online form is a great way to enhance user experience by providing a visual representation of locations. Let&#8217;s say you own a travel agency and you regularly create online reservation forms for different tour packages and destinations. [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[463,621,620,591],"class_list":["post-14392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formeditor","tag-google-map","tag-interactive","tag-location","tag-location-on-google-map"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Can I add a Google interactive map to form?| 123FormBuilder<\/title>\n<meta name=\"description\" content=\"Can I add a Google interactive map on the form? Yes, you can. Follow our documentation on how to make the map interactive on your form.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Can I add a Google interactive map to my 123FormBuilder form?\" \/>\n<meta property=\"og:description\" content=\"Can I add a Google interactive map on the form? Yes, you can. Follow our documentation on how to make the map interactive on your form.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-14T13:51:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T08:34:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Can I add a Google interactive map to form?| 123FormBuilder","description":"Can I add a Google interactive map on the form? Yes, you can. Follow our documentation on how to make the map interactive on your form.","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:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/","og_locale":"en_US","og_type":"article","og_title":"Can I add a Google interactive map to my 123FormBuilder form?","og_description":"Can I add a Google interactive map on the form? Yes, you can. Follow our documentation on how to make the map interactive on your form.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2015-01-14T13:51:03+00:00","article_modified_time":"2024-04-04T08:34:48+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/"},"author":{"name":"","@id":""},"headline":"Can I add a Google interactive map to my 123FormBuilder form?","datePublished":"2015-01-14T13:51:03+00:00","dateModified":"2024-04-04T08:34:48+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/"},"wordCount":365,"commentCount":6,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png","keywords":["Google map","interactive","location","location on google map"],"articleSection":["Form Editor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/","name":"Can I add a Google interactive map to form?| 123FormBuilder","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png","datePublished":"2015-01-14T13:51:03+00:00","dateModified":"2024-04-04T08:34:48+00:00","author":{"@id":""},"description":"Can I add a Google interactive map on the form? Yes, you can. Follow our documentation on how to make the map interactive on your form.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-21-at-12.06.50-1024x580.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-add-a-google-interactive-map-on-my-online-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"Can I add a Google interactive map to my 123FormBuilder form?"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/14392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=14392"}],"version-history":[{"count":40,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/14392\/revisions"}],"predecessor-version":[{"id":48542,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/14392\/revisions\/48542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=14392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=14392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=14392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}