{"id":652,"date":"2019-06-11T06:00:29","date_gmt":"2019-06-11T10:00:29","guid":{"rendered":"https:\/\/wpcreatorsclub.com\/?p=652"},"modified":"2019-08-29T07:35:32","modified_gmt":"2019-08-29T11:35:32","slug":"3-ways-to-embed-a-google-map-without-a-credit-card-number","status":"publish","type":"post","link":"https:\/\/wpcreatorsclub.com\/3-ways-to-embed-a-google-map-without-a-credit-card-number\/","title":{"rendered":"3 Ways to Embed a Google Map without a credit card number."},"content":{"rendered":"\n<p>If you&#8217;re not wanting to pay for a Google Map on your website, you&#8217;re not alone.<\/p>\n\n\n\n<p>At the end of 2018, Google changed its pricing model for Google Maps usage and introduced <a rel=\"noreferrer noopener\" aria-label=\"a new &#039;pay-as-you-go&#039; model (opens in a new tab)\" href=\"https:\/\/cloud.google.com\/maps-platform\/pricing\/\" target=\"_blank\">a new &#8216;pay-as-you-go&#8217; model<\/a>. <\/p>\n\n\n\n<p>While Google does offer a <strong>$200 monthly credit<\/strong> for the service, a lot of website owners felt frustrated that they now had to pay for a service they&#8217;ve been using for free for years.<\/p>\n\n\n\n<p><strong>I get it though<\/strong>, services, staff and keeping servers running efficiently costs money.<\/p>\n\n\n\n<p>No matter which side of the fence you fall on, here are <strong>3 ways to embed a Google Map on your website<\/strong> that doesn&#8217;t rely on the custom Google Maps API or handing your credit card over to Google.<\/p>\n\n\n\n<p>Feel free to watch the video below to see demonstrations for all 3 or click on a method name below to jump to that tutorial.<\/p>\n\n\n\n<ul><li><a href=\"#standard\">Standard Embed<\/a> (around 0:52 in the video)<\/li><li><a href=\"#advanced\">Custom Map Embed<\/a> (around 3:06 in the video)<\/li><li><a href=\"#responsive-trick\">Responsive Image Trick<\/a> (around 8:08 in the video)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"3 Ways to Embed a Google Map without a credit card number\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/nj885XPM3Pk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"standard\">Standard Embed Code<\/h2>\n\n\n\n<p>The standard embed code is the easiest and most direct method of getting a Google Map embedded on your website without having to pay.<\/p>\n\n\n\n<p>Here are a few of the benefits of using this method:<\/p>\n\n\n\n<ul><li>easiest to set up<\/li><li>maintains map interactivity<\/li><li>responsive on mobile devices<\/li><\/ul>\n\n\n\n<p>This method is demonstrated around 0:52 in the video shown above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Perform a search on Google Maps<\/h3>\n\n\n\n<p>Head over to <a rel=\"noreferrer noopener\" aria-label=\"Google maps (opens in a new tab)\" href=\"https:\/\/www.google.com\/maps\" target=\"_blank\">Google maps<\/a> and do a search for the location you&#8217;d like to display in your Google Map embed.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"376\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step1.jpg\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step1.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step1-480x258.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Get Embed Code<\/h3>\n\n\n\n<p>To get the embed code for your map, click on the &#8216;share&#8217; icon in the left panel on the screen.<\/p>\n\n\n\n<p>A popup window will be displayed asking if you want to &#8216;<strong>share a link<\/strong>&#8216; or &#8216;<strong>embed a map<\/strong>&#8216; &#8211; click on &#8216;<strong>embed a map<\/strong>.&#8217;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"355\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step2.jpg\" alt=\"Google Maps embed a map link\" class=\"wp-image-655\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step2.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-standard-step2-480x243.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<p>Google Maps will then show you an iframe code. Copy this code &#8211; it&#8217;s what we&#8217;re going to paste on our website to display our map.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Embed the map!<\/h3>\n\n\n\n<p>Now that we have our iframe code, we&#8217;re going to use it to embed the Google Map on our website .<\/p>\n\n\n\n<p>Open your website editor (in the video, I&#8217;m using the <a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=42834\" target=\"_blank\" rel=\"noopener\">Divi theme<\/a> from Elegant Themes which is <strong>pretty awesome<\/strong>. Awesome enough that the link I&#8217;ve used is my affiliate link, which means if you purchase it through that link I may be compensated at no cost to you &#8211; it helps supplement the cost of running this website and developing our products.)<\/p>\n\n\n\n<p>In the video, I used the Divi builder to easily embedded the map as a full width map section on the contact page but feel free to put your map where ever you&#8217;d like.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced\">Embedding a Custom Google Map<\/h2>\n\n\n\n<p>This method is demonstrated around 3:06 in the video at the top of the post and differs a bit in the setup stage compared to the standard maps embed.<\/p>\n\n\n\n<p>This method is cool because it:<\/p>\n\n\n\n<ul><li>offers map customizations<\/li><li>can display multiple map marker locations on one map<\/li><li>displays a lot of location data compared to the standard embed<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Open the custom Google Map screen.<\/h3>\n\n\n\n<p>Go to Google Maps and then click on the &#8216;hamburger&#8217; menu icon in the upper left corner of the screen.<\/p>\n\n\n\n<p>An admin menu will slide out &#8211; click on the option that says &#8216;<strong>Your places<\/strong>.&#8217;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"355\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step1.jpg\" alt=\"Google Maps menu\" class=\"wp-image-656\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step1.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step1-480x243.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<p>Next a new panel will open with some options. You want to click the Maps tab and then scroll down and click the &#8216;Create a Map&#8217; button found at the bottom of the page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"355\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step2.jpg\" alt=\"google maps create a map\" class=\"wp-image-657\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step2.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step2-480x243.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Build a custom Google Map<\/h3>\n\n\n\n<p>Once your new map is created, you can start adding locations to it.<\/p>\n\n\n\n<p>First, I recommend changing the title of the map because it will be visible on your website and it will help you keep things organized if you create multiple maps.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"355\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step3.jpg\" alt=\"\" class=\"wp-image-658\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step3.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step3-480x243.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure>\n\n\n\n<p>After that, use the search bar at the top of the map (2) to start finding your locations and then click &#8216;<strong>Add to Map<\/strong>&#8216; (3) in the info window for each location to add it to your map.<\/p>\n\n\n\n<p>As an added bonus you can also add in custom text, images and colors as well as use custom map marker icons after you add a location to your map.<\/p>\n\n\n\n<p>I show a few examples of this in the video if you&#8217;re interested in really customizing your map.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Make your custom map public<\/h3>\n\n\n\n<p>In order to embed the map on your site, you&#8217;ll likely need to change the permissions on your map. If you get an error that your map isn&#8217;t yet public, click on the <strong>Share<\/strong> icon below your map name and in the popup window, under &#8216;<strong>Who has access<\/strong>,&#8217; change it to &#8216;<strong>Public on the web<\/strong>.&#8217;<\/p>\n\n\n\n<p>Once you&#8217;ve made the change, click the <strong>Done<\/strong> button at the bottom of the window.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"329\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step4.jpg\" alt=\"changing custom google maps permissions\" class=\"wp-image-659\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step4.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-advanced-step4-480x226.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Get custom map embed code<\/h3>\n\n\n\n<p>Now that your map is publically viewable, we just need to grab the embed code.<\/p>\n\n\n\n<p>Click the 3 horizontal dots next to your map&#8217;s name and select the option that says &#8216;<strong>Embed on my site<\/strong>.&#8217;<\/p>\n\n\n\n<p>Google Maps will then provide you with an <strong>iframe code<\/strong> similar to the standard method which you can embed on your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"responsive-trick\">Responsive Image Trick<\/h2>\n\n\n\n<p>This is one of my favorite methods due to its simplicity and &#8216;future-proofness.&#8217; You can see a demonstration of this method around 8:08 in the video.<\/p>\n\n\n\n<p>With this method, we aren&#8217;t actually embedding a map at all &#8211; we&#8217;re displaying a map image and then letting Google Maps to do all the heavy lifting.<\/p>\n\n\n\n<p>The main benefits of this method are:<\/p>\n\n\n\n<ul><li>No <strong>GDPR<\/strong> considerations since you&#8217;re not loading external resources<\/li><li>reduces the number of external HTTP requests on page load<\/li><li>loads quickly<\/li><li>opens to Google Maps app on mobile devices if available<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Grab a screenshot of Google Maps<\/h3>\n\n\n\n<p>Visit Google Maps, perform a search for the location you want to display and take a screenshot of the map.<\/p>\n\n\n\n<p>You&#8217;ll want to optimize this screenshot for the web using a platform like Photoshop or Pixlr (for a great tutorial on <a rel=\"noreferrer noopener\" aria-label=\"optimizing website image using Pixlr.com (opens in a new tab)\" href=\"https:\/\/greentreemediallc.com\/easily-optimize-website-images-for-free\/\" target=\"_blank\">optimizing website image using Pixlr.com<\/a>, check out this article I wrote) because likely the image size will be large than you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Grab the Maps Link<\/h3>\n\n\n\n<p>You&#8217;re also going to need the link to this Google Map search. <\/p>\n\n\n\n<p>You can get the link by clicking the <strong>share<\/strong> icon in the left hand panel, clicking the &#8216;<strong>Send a link<\/strong>&#8216; tab and then copying the link provided by Google.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"329\" src=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-trick-step1.jpg\" alt=\"Google Maps share link\" class=\"wp-image-660\" srcset=\"https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-trick-step1.jpg 700w, https:\/\/wpcreatorsclub.com\/wp-content\/uploads\/2019\/06\/google-maps-trick-step1-480x226.jpg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 700px, 100vw\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Embed the Map (image)<\/h3>\n\n\n\n<p>Now, simply add the screen shot of your Google Map to your website.<\/p>\n\n\n\n<p>Make sure the image is clickable and set the link to the custom link we just copied in Step 2. This is important because when users click it, we want them to be directed to Google Maps (ideally in a new tab) so Google Maps can do the heavy lifting of showing them information and directions.<\/p>\n\n\n\n<p>Another bonus to this method is that if a mobile user clicks the image and has the Google Maps app installed on their device, the Google Maps app will open and will handle everything natively, making for a very smooth user experience. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>These are just 3 of the ways to embed a Google Map on your website but there are also plenty of plugins out there that will do the job as well.<\/p>\n\n\n\n<p>If you have other ways of embedding a Google Map on your site that have worked well for you, let me know about it in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re not wanting to pay for a Google Map on your website, you&#8217;re not alone. At the end of 2018, Google changed its pricing model for Google Maps usage and introduced a new &#8216;pay-as-you-go&#8217; model. While Google does offer a $200 monthly credit for the service, a lot of website owners felt frustrated that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":661,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[23,37],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/652"}],"collection":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":0,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/media\/661"}],"wp:attachment":[{"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcreatorsclub.com\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}