{"id":34729,"date":"2021-05-20T17:51:55","date_gmt":"2021-05-20T22:51:55","guid":{"rendered":"https:\/\/wiredimpact.com\/?post_type=support&#038;p=34729"},"modified":"2024-04-10T08:35:04","modified_gmt":"2024-04-10T13:35:04","slug":"embedding-google-map","status":"publish","type":"support","link":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/","title":{"rendered":"Embedding a Google Map"},"content":{"rendered":"\n<p>Adding a Google Map to a page on your website can help people visualize the location of your nonprofit\u2019s office, program or event in a way that\u2019s interactive. There\u2019s no limit to the number of maps you can use, and even better, there\u2019s no cost!<\/p>\n\n\n\n<p>We\u2019ll show you how to create a simple Google Map of a single location and the process of embedding it within a page on your site. For more advanced needs, you can also learn how to <a href=\"#google-map-multiple-locations\">create and add a map with multiple locations<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light\" style=\"min-height:167px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-off-white-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p>FEATURE AVAILABILITY<\/p>\n\n\n\n<p>The ability to embed third-party code is only available for <a href=\"https:\/\/wiredimpact.com\/pricing\/\"><strong>Grow <\/strong>and <strong>Amplify <\/strong>plan websites<\/a>. Change your plan in the Account &amp; Billing section of your website Dashboard.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-google-map-of-a-single-location\">Create a Google Map of a Single Location<\/h2>\n\n\n\n<p>The first step is to generate a map of the location, which doesn\u2019t happen on your website. Visit the main <a rel=\"noreferrer noopener\" aria-label=\"main Google Maps page (opens in a new tab)\" href=\"https:\/\/www.google.com\/maps\/\" target=\"_blank\">Google Maps page<\/a> and search for the address you\u2019d like to show.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the blue &#8220;Share&#8221; icon. <\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"558\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png\" alt=\"A screenshot of a Wired Impact location  address on Google Maps page highlighting the Share icon\" class=\"wp-image-37626\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png 668w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps-369x308.png 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps-530x443.png 530w\" sizes=\"(max-width: 668px) 100vw, 668px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>A popup will appear. Click the &#8220;Embed a map&#8221; option at the top of the window. This will display some code that starts with &lt;iframe scr= &#8230;>\n<ul class=\"wp-block-list\">\n<li>You can also choose a size for your map at this point, though the default Medium size works well in most cases.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click the &#8220;Copy HTML&#8221; link on the right side of the popup.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"606\" height=\"599\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Embed_Map.png\" alt=\"A screenshot of the selected location address on the Google  Map highlighting the Embed a map option and the Copy HTML link at the top of the map\" class=\"wp-image-37627\" srcset=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Embed_Map.png 606w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Embed_Map-369x365.png 369w, https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Embed_Map-530x524.png 530w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"add-map-page\">Add your map to a page<\/h3>\n\n\n\n<p>Once you&#8217;ve copied the HTML code for the Google map, you\u2019ll paste this code into the page where you\u2019d like the map to show up. Make sure you\u2019re logged into your site and open up the editing view of the page first.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re using the Full Width (no sidebar) page template, the map will automatically span the full width of the page <strong>unless<\/strong> you place it within a column.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the location where you want to add the map, add the Custom HTML block.&nbsp;<\/li>\n\n\n\n<li>Paste the code into the new block.<\/li>\n\n\n\n<li>Click Preview at the top of the block to see if the map displays properly.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"640\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Add_Map_To_Page.gif\" alt=\"A GIF demonstrating how to add a map to a page in the back end of a website\" class=\"wp-image-37628\"\/><\/figure><\/div>\n\n\n<p>Be sure to take it for a test run by moving the map around and making sure the location is correct for people who need directions.<\/p>\n\n\n\n<p>If everything looks good, save your work or go ahead and publish or update the page with your new map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"google-map-multiple-locations\">Create a Google Map with Multiple Locations<\/h2>\n\n\n\n<p>If you have more than one location that you\u2019d like to include in your Google map, the steps are slightly more advanced. Visit the <a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/www.google.com\/maps\/about\/mymaps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google My Maps page<\/a>, sign in with your Google account, and click the \u201cGet Started\u201d button.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In the top left, click the red \u201cCreate a New Map\u201d button.<\/li>\n\n\n\n<li>Where it says \u201cUntitled map\u201d in the top left, click to customize the title and description.<\/li>\n\n\n\n<li>Now you can <a href=\"https:\/\/support.google.com\/mymaps\/answer\/3024925?hl=en&amp;ref_topic=3024924\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">add places to your map<\/a>, change what the base map looks like, and <a href=\"https:\/\/support.google.com\/mymaps\/answer\/3024933?hl=en&amp;ref_topic=3024969\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">adjust the layers and icons<\/a>.<\/li>\n\n\n\n<li>When your map is complete, click the three dots icon to the right of your map\u2019s title and select \u201cEmbed on my site.\u201d Copy the HTML code that appears and click OK.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"640\" src=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Embed_Map_Multiple_Locations.gif\" alt=\" A GIF demonstrating how to add more than one location on a map in the back end of a website\" class=\"wp-image-37630\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"add-your-map-to-a-page\">Add your map to a page<\/h3>\n\n\n\n<p>Once you\u2019ve copied the code for your map, you\u2019ll embed it in a page on your website using the <a href=\"#add-map-page\">same steps outlined above<\/a>. <\/p>\n\n\n\n<p>For additional tips and instructions on editing a map with multiple locations, please visit Google\u2019s <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/support.google.com\/mymaps\/?hl=en#topic=3188329\" target=\"_blank\">My Maps support page<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-off-white-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"is-style-h3 wp-block-heading\" id=\"still-have-questions\">Still Have Questions?<\/h2>\n\n\n\n<p><strong>The quickest way to get support<\/strong> is to reach out to us within your website\u2019s admin dashboard. Log into your website and then fill out the Request Help form. You\u2019ll hear back from us within one business day.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-no-border\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wiredimpact.com\/request-help\/\">Learn more about requesting help<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-34729","support","type-support","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Embedding a Google Map - Wired Impact<\/title>\n<meta name=\"description\" content=\"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding a Google Map - Wired Impact\" \/>\n<meta property=\"og:description\" content=\"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/\" \/>\n<meta property=\"og:site_name\" content=\"Wired Impact\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wiredimpact\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-10T13:35:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wiredimpact\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/\",\"url\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/\",\"name\":\"Embedding a Google Map - Wired Impact\",\"isPartOf\":{\"@id\":\"https:\/\/wiredimpact.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png\",\"datePublished\":\"2021-05-20T22:51:55+00:00\",\"dateModified\":\"2024-04-10T13:35:04+00:00\",\"description\":\"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.\",\"breadcrumb\":{\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage\",\"url\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png\",\"contentUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png\",\"width\":668,\"height\":558},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wiredimpact.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding a Google Map\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wiredimpact.com\/#website\",\"url\":\"https:\/\/wiredimpact.com\/\",\"name\":\"Wired Impact\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/wiredimpact.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wiredimpact.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wiredimpact.com\/#organization\",\"name\":\"Wired Impact\",\"url\":\"https:\/\/wiredimpact.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png\",\"contentUrl\":\"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png\",\"width\":1024,\"height\":1024,\"caption\":\"Wired Impact\"},\"image\":{\"@id\":\"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wiredimpact\",\"https:\/\/x.com\/wiredimpact\",\"https:\/\/www.instagram.com\/wiredimpact\/\",\"https:\/\/www.linkedin.com\/company\/wired-impact\/\",\"https:\/\/www.pinterest.com\/wiredimpact\/\",\"https:\/\/www.youtube.com\/user\/wiredimpact\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embedding a Google Map - Wired Impact","description":"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.","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:\/\/wiredimpact.com\/support\/embedding-google-map\/","og_locale":"en_US","og_type":"article","og_title":"Embedding a Google Map - Wired Impact","og_description":"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.","og_url":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/","og_site_name":"Wired Impact","article_publisher":"https:\/\/www.facebook.com\/wiredimpact","article_modified_time":"2024-04-10T13:35:04+00:00","og_image":[{"url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@wiredimpact","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/","url":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/","name":"Embedding a Google Map - Wired Impact","isPartOf":{"@id":"https:\/\/wiredimpact.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage"},"image":{"@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage"},"thumbnailUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png","datePublished":"2021-05-20T22:51:55+00:00","dateModified":"2024-04-10T13:35:04+00:00","description":"In this article, you\u2019ll learn how to embed a Google Map on a page, event or blog post. Maps can include just one location or multiple places.","breadcrumb":{"@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wiredimpact.com\/support\/embedding-google-map\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#primaryimage","url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png","contentUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/Share_Icon_Google_Maps.png","width":668,"height":558},{"@type":"BreadcrumbList","@id":"https:\/\/wiredimpact.com\/support\/embedding-google-map\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wiredimpact.com\/"},{"@type":"ListItem","position":2,"name":"Embedding a Google Map"}]},{"@type":"WebSite","@id":"https:\/\/wiredimpact.com\/#website","url":"https:\/\/wiredimpact.com\/","name":"Wired Impact","description":"","publisher":{"@id":"https:\/\/wiredimpact.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wiredimpact.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wiredimpact.com\/#organization","name":"Wired Impact","url":"https:\/\/wiredimpact.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/","url":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png","contentUrl":"https:\/\/wiredimpact.com\/wp-content\/uploads\/2021\/06\/wired-impact-logo.png","width":1024,"height":1024,"caption":"Wired Impact"},"image":{"@id":"https:\/\/wiredimpact.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wiredimpact","https:\/\/x.com\/wiredimpact","https:\/\/www.instagram.com\/wiredimpact\/","https:\/\/www.linkedin.com\/company\/wired-impact\/","https:\/\/www.pinterest.com\/wiredimpact\/","https:\/\/www.youtube.com\/user\/wiredimpact"]}]}},"_links":{"self":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support\/34729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/types\/support"}],"version-history":[{"count":0,"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/support\/34729\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiredimpact.com\/wp-json\/wp\/v2\/media?parent=34729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}