{"id":106,"date":"2019-09-20T07:09:24","date_gmt":"2019-09-20T07:09:24","guid":{"rendered":"https:\/\/www.loftocean.com\/eaven\/?p=106"},"modified":"2019-11-04T02:50:02","modified_gmt":"2019-11-04T02:50:02","slug":"how-to-display-google-map-on-your-website","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/eaven\/google-map\/how-to-display-google-map-on-your-website\/","title":{"rendered":"How to display Google Map on your website"},"content":{"rendered":"<p>As a WordPress theme for traveller blog and magazine, displaying a Google Map with destinations is an essential feature. In this how-to article, we will explain the steps of how to add a Google Map with Eaven theme.<\/p>\n<ul>\n<li><a href=\"#get-api\">Get Google Map API Key<\/a><\/li>\n<li><a href=\"#add-api\">Add Google Map API Key to your site<\/a><\/li>\n<li><a href=\"#post-location\">Add locations to your posts<\/a><\/li>\n<li><a href=\"#map-on-homepage\">Display a Google Map on homepage<\/a><\/li>\n<li><a href=\"#map-in-content\">Add a Google Map to page\/post content<\/a><\/li>\n<li><a href=\"#embed-map\">How to display a map with a specific location, not posts?<\/a><\/li>\n<\/ul>\n<hr>\n<h4 id=\"get-api\">Get your Google Map API Key<\/h4>\n<p>Starting from June 11, 2018, Google requires new API key to use Google Map. To get the API key, you need a Google Cloud Platform billing account. When you create a billing account, you are automatically eligible for the Google Maps Platform recurring $200 monthly credit.<\/p>\n<p>You can find the following information on the <a href=\"https:\/\/cloud.google.com\/maps-platform\/user-guide\/pricing-changes\/\" rel=\"noopener\" target=\"_blank\">Google Map &#8220;Pricing and Billing Changes&#8221; page<\/a>:<\/p>\n<blockquote><p><strong>Can I still use Google Maps Platform for free?<\/strong><br \/>\nYes. When you enable billing, you get $200 free usage every month for Maps, Routes, or Places. Based on the millions of users using our APIs today, most of them can continue to use Google Maps Platform for free with this credit.<\/p><\/blockquote>\n<p>Please watch this video to know how to get your Google Map API Key:<\/p>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/9ImLCQBj9SE\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<div class=\"info-box\">\nGoogle Map Documentation: <\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/embed\/get-api-key\" rel=\"noopener\" target=\"_blank\">Get an API Key<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/maps\/billing-credits\" rel=\"noopener\" target=\"_blank\">Billing Account Credits<\/a>.<\/li>\n<li><a href=\"https:\/\/cloud.google.com\/maps-platform\/pricing\/#pricing-for-maps-routes-and-places\" rel=\"noopener\" target=\"_blank\">Pricing for Maps, Routes, and Places<\/a><\/li>\n<\/ul>\n<\/div>\n<hr>\n<h4 id=\"add-api\">Add Google Map API Key to your site<\/h4>\n<p>When you get your Google Map API Key, please copy it, and open your website Customizer, then go to <strong>General<\/strong> > <strong>Google Map<\/strong> > Paste the key into &#8220;<strong>API Key<\/strong>&#8221; field. Then save the changes.<\/p>\n<figure id=\"attachment_120\" aria-describedby=\"caption-attachment-120\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-1440x1024.png\" alt=\"\" width=\"1200\" height=\"853\" class=\"size-loft_extra_large wp-image-120\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-1440x1024.png 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-300x213.png 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-768x546.png 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-1024x728.png 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-360x256.png 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-480x341.png 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-720x512.png 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-960x682.png 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-google-map-api-key-1200x853.png 1200w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-120\" class=\"wp-caption-text\">Add your Google Map API Key to your website.<\/figcaption><\/figure>\n<p>Now your map is ready to display. But, to display pins on the map, you need to add locations to your posts first. Please read the following section.<\/p>\n<hr>\n<h4 id=\"post-location\">Add locations to your posts<\/h4>\n<p><strong>In Classic Editor<\/strong><\/p>\n<p>When you write a post, scroll down the edit page and then you will find the <strong>Eaven Single Post Options<\/strong> panel > <strong>Location<\/strong> field. If you are writing a post about a destination (country\/states\/city\/etc.), you can add the name of this destination to the <strong>Location<\/strong> field, such as &#8220;<i style=\"color: #999;\">Sydney, NSW, Australia<\/i>&#8220;.<\/p>\n<p><span class=\"highlighted\">Please note:<\/span> Do not add same location to different posts, otherwise, the post information cannot be displayed on the map when clicking on the pin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-1440x631.png\" alt=\"\" width=\"1200\" height=\"526\" class=\"alignnone size-loft_extra_large wp-image-124\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-1440x631.png 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-300x131.png 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-768x336.png 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-1024x449.png 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-360x158.png 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-480x210.png 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-720x315.png 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-960x421.png 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-1200x526.png 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location.png 1598w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>Latitude &#038; Longitude<\/strong><\/p>\n<p>After adding a location to a post, when saving the changes to this post, the Latitude &#038; Longitude values will be generated automatically from the location added. The Latitude &#038; Longitude values are required to display a pin on the map. You can add <strong>custom Latitude &#038; Longitude<\/strong> values if the map pin location in incorrect.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-1440x684.png\" alt=\"\" width=\"1200\" height=\"570\" class=\"alignnone size-loft_extra_large wp-image-125\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-1440x684.png 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-300x142.png 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-768x365.png 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-1024x486.png 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-360x171.png 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-480x228.png 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-720x342.png 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-960x456.png 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long-1200x570.png 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/lat-long.png 1596w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><span class=\"highlighted\">Please note:<\/span> The Google Map API key is required to auto generate Latitude &#038; Longitude values.<\/p>\n<div class=\"info-box\">\n<p>If you added some locations before adding your Google Map API key, please:<\/p>\n<ul>\n<li><strong>Method 1 &#8211;<\/strong> Re-save the posts to auto generate the Latitude &#038; Longitude values.<\/li>\n<li><strong>Method 2 &#8211;<\/strong> Or, on the post list page (dashboard > Posts > All Posts), find the <strong>&#8220;Map Location&#8221;<\/strong> column, then click on the <strong>&#8220;Generate Latitude &#038; Longitude&#8221;<\/strong> button for each post.<\/li>\n<\/ul>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-1440x531.jpg\" alt=\"\" width=\"1200\" height=\"443\" class=\"alignnone size-loft_extra_large wp-image-126\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-1440x531.jpg 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-300x111.jpg 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-768x283.jpg 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-1024x378.jpg 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-360x133.jpg 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-480x177.jpg 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-720x266.jpg 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-960x354.jpg 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long-1200x443.jpg 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/generate-lat-long.jpg 2000w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p><strong>In Gutenberg Block Editor<\/strong><\/p>\n<p>If you use Gutenberg Block Editor, you can find the field for adding location in <strong>Theme Settings<\/strong> > <strong>Map Settings<\/strong> > <strong>Location<\/strong> field.<\/p>\n<figure id=\"attachment_127\" aria-describedby=\"caption-attachment-127\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-1440x900.jpg\" alt=\"\" width=\"1200\" height=\"750\" class=\"size-loft_extra_large wp-image-127\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-1440x900.jpg 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-300x188.jpg 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-768x480.jpg 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-1024x640.jpg 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-360x225.jpg 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-480x300.jpg 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-720x450.jpg 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-960x600.jpg 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg-1200x750.jpg 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/add-post-location-gutenberg.jpg 1800w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-127\" class=\"wp-caption-text\">Add post location in Gutenberg editor.<\/figcaption><\/figure>\n<p>Then, when you add a Google Map to your homepage (using the home widgets &#8220;Google Map&#8221;), or add a Google Map to your post\/page content (using Google Map shortcode or Gutenberg block), you will see a pin shown on the map. Click on this pin to display the thumbnail (featured image) and title of this post. Click it to go to this post.<\/p>\n<figure id=\"attachment_128\" aria-describedby=\"caption-attachment-128\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-1440x544.jpg\" alt=\"\" width=\"1200\" height=\"453\" class=\"size-loft_extra_large wp-image-128\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-1440x544.jpg 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-300x113.jpg 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-768x290.jpg 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-1024x387.jpg 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-360x136.jpg 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-480x181.jpg 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-720x272.jpg 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-960x363.jpg 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map-1200x454.jpg 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/pins-on-map.jpg 1778w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-128\" class=\"wp-caption-text\">Pin of a post on the map.<\/figcaption><\/figure>\n<hr>\n<h4 id=\"map-on-homepage\">Display a Google Map on homepage<\/h4>\n<p>Please open your <strong>WordPress customizer<\/strong>, go to <strong>Home Page<\/strong> > <strong>Content Area Before Latest Posts<\/strong> > Click on <strong>&#8220;Add a Widget&#8221;<\/strong> button, select <strong>Google Map<\/strong>. Then the map will display on your homepage.<\/p>\n<p>There are some options:<\/p>\n<ul>\n<li><strong>Width<\/strong> &#8211; Normal or Fullwidth<\/li>\n<li><strong>Height<\/strong> &#8211; Enter a height for the map.<\/li>\n<li><strong>Number of Displayed Pins<\/strong> &#8211; Enter a number to limit the maximum number of pins displayed on the map (because each  displayed pin will cost a certain amount of Geocoding API credits). Enter &#8220;0&#8221; to display all pins.<\/li>\n<li><strong>Preset Style<\/strong> &#8211; Select a preset style for your map. Currently there are 4. More styles will be added in future updates.<\/li>\n<li><strong>Zoom Level<\/strong> &#8211; Enter a number to decide the map resolution.  (0: World; 15: Streets; 20: Buildings. More info can be found <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/tutorial#zoom-levels\" target=\"_blank\">here<\/a>.)<\/li>\n<li><strong>Centered Location (optional)<\/strong> &#8211; Add a location to ensure the center point of the map. It can be the name of a city\/street\/building.<\/li>\n<\/ul>\n<hr>\n<h4 id=\"map-in-content\">Add a Google Map to page\/post content<\/h4>\n<p>You can also add a map with all the destinations (posts with locations) in the content of single posts or pages. <\/p>\n<p><strong>In Classic Editor<\/strong><\/p>\n<p>In classic editor, just click on &#8220;Add a Shortcode&#8221; button, then click &#8220;Google Map&#8221;. <\/p>\n<p>In classic editor, just click on <strong>&#8220;Add Shortcode&#8221;<\/strong> button, then click <strong>&#8220;Google Map&#8221;<\/strong>.<\/p>\n<figure id=\"attachment_130\" aria-describedby=\"caption-attachment-130\" style=\"width: 1400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode.jpg\" alt=\"\" width=\"1400\" height=\"940\" class=\"size-full wp-image-130\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode.jpg 1400w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-300x201.jpg 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-768x516.jpg 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-1024x688.jpg 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-360x242.jpg 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-480x322.jpg 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-720x483.jpg 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-960x645.jpg 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-shortcode-1200x806.jpg 1200w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption id=\"caption-attachment-130\" class=\"wp-caption-text\">Add the shortcode of Google Map.<\/figcaption><\/figure>\n<p><strong>In Gutenberg Editor<\/strong><\/p>\n<p>In Gutenberg Block Editor, when adding a block, find <strong>&#8220;Theme Blocks&#8221;<\/strong> > <strong>&#8220;Google Map&#8221;<\/strong>, then add it to the page.<\/p>\n<figure id=\"attachment_131\" aria-describedby=\"caption-attachment-131\" style=\"width: 800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block.png\" alt=\"\" width=\"800\" height=\"970\" class=\"size-full wp-image-131\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block.png 800w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block-247x300.png 247w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block-768x931.png 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block-360x437.png 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block-480x582.png 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/google-map-block-720x873.png 720w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption id=\"caption-attachment-131\" class=\"wp-caption-text\">Add Google Map Block<\/figcaption><\/figure>\n<p><span class=\"highlighted\">Please note:<\/span><\/p>\n<ul>\n<li>To save your Google Map Geocoding API credits, it only shows a map placeholder image in Gutenberg editor. Please save your settings and check the results in the front-end.<\/li>\n<li>When eiditing in Gutenberg, to change the map width, please click on the map placeholder, then you can choose between <strong>&#8220;Wide Width&#8221;<\/strong> and <strong>&#8220;Full Width&#8221;<\/strong>. To maintain a normal width (same as text paragraphs), do not select either of these two.<\/li>\n<\/ul>\n<figure id=\"attachment_132\" aria-describedby=\"caption-attachment-132\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-1440x491.jpg\" alt=\"\" width=\"1200\" height=\"409\" class=\"size-loft_extra_large wp-image-132\" srcset=\"https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-1440x491.jpg 1440w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-300x102.jpg 300w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-768x262.jpg 768w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-1024x349.jpg 1024w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-360x123.jpg 360w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-480x164.jpg 480w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-720x245.jpg 720w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-960x327.jpg 960w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width-1200x409.jpg 1200w, https:\/\/www.loftocean.com\/eaven\/wp-content\/uploads\/sites\/10\/2019\/10\/map-block-width.jpg 1600w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption id=\"caption-attachment-132\" class=\"wp-caption-text\">Change the width of Google Map Block<\/figcaption><\/figure>\n<hr>\n<h4 id=\"embed-map\">How to display a map with a specific location, not posts?<\/h4>\n<p>You can simply embed a map. You don&#8217;t need to add a Google Map API key to embed a map. And it will not cost your Geocoding API credits.<\/p>\n<p>Note: Traffic and other Maps info is sometimes not available in the embedded map.<\/p>\n<ol>\n<li>Open <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\">Google Maps<\/a>.<\/li>\n<li>Go to the directions, map, or Street View image you&#8217;d like to embed.<\/li>\n<li>In the top left, click <span class=\"highlighted\">Menu<\/span>.<\/li>\n<li>Click <span class=\"highlighted\">Share or embed map<\/span>.<\/li>\n<li>Click <span class=\"highlighted\">Embed map<\/span>.<\/li>\n<li>To the left of the text box, pick the size you want by clicking the Down arrow.<\/li>\n<li>Copy the text in the box. Paste it into your post\/page content. If you are using Gutenberg, please add an <strong>HTML Block<\/strong> to add the embed code.<\/li>\n<\/ol>\n<p>You can find the details in Google Map Documentation: <a href=\"https:\/\/support.google.com\/maps\/answer\/144361\" target=\"_blank\">Embed a map or directions<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a WordPress theme for traveller blog and magazine, displaying a Google Map with destinations is an essential feature. In this how-to article, we will explain the steps of how to add a Google Map with Eaven theme. Get Google Map API Key Add Google Map API Key to your site Add locations to your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-106","post","type-post","status-publish","format-standard","hentry","category-google-map"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":5,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/posts\/106\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/eaven\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}