{"id":864,"date":"2022-08-16T09:04:23","date_gmt":"2022-08-16T09:04:23","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6474784-hostinger-website-builder-how-to-add-a-map\/"},"modified":"2026-03-16T12:12:07","modified_gmt":"2026-03-16T12:12:07","slug":"6474784-hostinger-website-builder-how-to-add-a-map","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6474784-hostinger-website-builder-how-to-add-a-map\/","title":{"rendered":"Hostinger Website Builder: How to Add a Map"},"content":{"rendered":"<p class=\"no-margin\">In <b>Hostinger Website Builder<\/b>, there are several ways to add a map to your site:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_ab8d465c64\" target=\"_blank\" class=\"intercom-content-link\">Using a map element<\/a><\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_df797387ed\" target=\"_blank\" class=\"intercom-content-link\">Using Google My Maps<\/a><\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\"><b> <\/b><\/p><h2 id=\"h_ab8d465c64\">Using the Map Element<\/h2><p class=\"no-margin\">Within the editor, open the <b>Add elements <\/b>panel on the left. Choose the <b>Map <\/b>element and drag it to the preferred place on your website:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/412fb9ad-9a3f-4250-9620-d33ed0da198b.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on the element to see more options (edit, duplicate, hide, delete, resize):<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/af31339e-ff0b-482b-b517-aa9762db84bc.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on <b>Edit map<\/b> and insert the preferred address; you can copy it from <b><a href=\"https:\/\/www.google.com\/maps\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Google Maps<\/a><\/b>.<\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Instead of using the map element, you may also <b><a href=\"\/support\/6475040-website-builder-sections\" target=\"_blank\" class=\"intercom-content-link\">insert a dedicated map section<\/a> <\/b>into your website &#128161; <\/p>\n<\/div><p class=\"no-margin\">&#8203; <\/p><h2 id=\"h_df797387ed\">Using Google My Maps<\/h2><p class=\"no-margin\">If you run a business in several locations and want to mark all of them on the map, you can do that with <b><a href=\"https:\/\/www.google.com\/maps\/d\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">My Maps<\/a><\/b> by Google. <\/p><p class=\"no-margin\">\n<\/p><h3 id=\"h_f3e6928326\">Step 1 &ndash; Create the Map<\/h3><p class=\"no-margin\">Open <b><a href=\"https:\/\/www.google.com\/maps\/d\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Google My Maps<\/a><\/b>,<b> <\/b>and click<b> <\/b>on <b>Create a new map<\/b>. Click on <b>Untitled map<\/b>, and add the name and description of your map. You can also choose the map appearance by clicking on <b>Base map<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/bafad10d-a931-408a-8b9f-a1232e696e63.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">In the search bar, insert your address and place a marker on the preferred area on the map:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/82c36872-679d-4732-8bb3-629bf1977a03.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on <b>Add to map<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/ea8fe4f5-0843-4da0-a9b0-ccbeb037db83.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">This way, you can mark more addresses on the map:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/255356b4-2515-4d7f-b214-da54ba44318c.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Learn more:<b> <a href=\"https:\/\/support.google.com\/mymaps\/answer\/3024454?hl=en&amp;ref_topic=3024924#\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Create or open a map<\/a><\/b> <\/p><p class=\"no-margin\">\n<\/p><h3 id=\"h_5f5174cbbd\">Step 2 &ndash; Embed the Map on Your Website<\/h3><p class=\"no-margin\">Once you&rsquo;ve created your map, it is time to embed it into your website. The first step is to make it visible for everyone &ndash; click on <b>Share<\/b>: <\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/5688f718-501f-40b6-8824-d219f942d748.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Toggle the options <b>Anyone with this link can view<\/b> and <b>Let others search for and find this map on the Internet<\/b>. Click on <b>Share on Drive<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/107c47be-5cad-45c2-9e43-56eb1c217972.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Finally, click on <b>Done<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/f8a61bc6-c068-46f1-b998-a2b99aa936b4.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Now, you&rsquo;re ready to get a code. Click on the ellipsis button <b>&#8942; <\/b>at the top of the settings window, and click on <b>Embed on my site<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/627f0ec3-d50e-4e0a-a707-e48b276d1c95.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">You&rsquo;ll get the code of your map. Copy it and paste it into your website using the <b><a href=\"\/support\/6463152-website-builder-embed-code\" target=\"_blank\" class=\"intercom-content-link\">embed code element<\/a><\/b>. If you want the map to be bigger or smaller, resize the code element or change the width and height numbers in the code within the embed code element:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/57cc7877-b00b-431d-95c2-251b0c6f9202.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">And that&rsquo;s it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Show your location by adding a map into your website<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[280],"tags":[],"class_list":["post-864","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6474784-hostinger-website-builder-how-to-add-a-map\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6474784-hostinger-creador-de-sitios-web-como-agregar-un-mapa\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6474784-hostinger-createur-de-site-web-comment-ajouter-une-carte\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6474784-hostinger-svetainiu-kurimo-irankis-zemelapio-elementas\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6474784-hostinger-criador-de-sites-como-adicionar-um-mapa\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/864\/revisions"}],"predecessor-version":[{"id":3531,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/864\/revisions\/3531"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}