{"id":7651,"date":"2021-05-26T17:10:47","date_gmt":"2021-05-26T07:10:47","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=7651"},"modified":"2021-05-26T17:27:56","modified_gmt":"2021-05-26T07:27:56","slug":"responsive-google-map-embed-in-oxygen","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/responsive-google-map-embed-in-oxygen\/","title":{"rendered":"Responsive Google Map Embed in Oxygen"},"content":{"rendered":"\n

This tutorial provides the steps to embed responsive maps in Oxygen<\/a> using Google’s Maps Embed API<\/a>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Step 1<\/h2>\n\n\n\n

Visit the Google maps embed API quickstart page<\/a>.<\/p>\n\n\n\n

Follow the steps listed there to obtain an API key.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 2<\/h2>\n\n\n\n

Enter your desired address or the search term or any other option available under “I want to…” and generate the iframe code.<\/p>\n\n\n\n

Paste your API key and press Done to get the iframe code similar to:<\/p>\n\n\n\n

<iframe width=\"600\" height=\"450\" style=\"border:0\" loading=\"lazy\" allowfullscreen src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?q=place_id:ChIJcw5BAI63t4kRj5qZY1MSyAo&key=xxxxxxxxxxxxxxxxxxxxx_xxxxxxxxxxxxxxxxx\"><\/iframe><\/code><\/pre>\n\n\n\n
Step 3<\/h2>\n\n\n\n
Add a Code Block component in Oxygen builder.<\/p>\n\n\n\n
Set its width to 100%.<\/p>\n\n\n\n
If you do not want the map to take up the full width of the container, set the max-width to something like 500px.<\/p>\n\n\n\n
Paste the iframe code in the PHP & HTML section but without the<\/p>\n\n\n\n
width=\"600\" height=\"450\" style=\"border:0\"<\/code><\/pre>\n\n\n\n
part.<\/p>\n\n\n\n
Also, wrap the code between<\/p>\n\n\n\n
<div class=\"iframe-container\"><\/code><\/pre>\n\n\n\n
and<\/p>\n\n\n\n
<\/div><\/code><\/pre>\n\n\n\n
Ex.:<\/p>\n\n\n\n
<div class=\"iframe-container\"><iframe loading=\"lazy\" allowfullscreen src=\"https:\/\/www.google.com\/maps\/embed\/v1\/place?q=place_id:ChIJcw5BAI63t4kRj5qZY1MSyAo&key=xxxxxxxxxxxxxxxxxxxxx_xxxxxxxxxxxxxxxxx\"><\/iframe><\/div><\/code><\/pre>\n\n\n\n
Step 4<\/h2>\n\n\n\n
At Manage > Stylesheets, add the following CSS:<\/p>\n\n\n\n
\/* Responsive iframes *\/\n\n:root {\n\t--aspect-ratio: 16\/9;\n}\n\n.iframe-container {\n\tposition: relative;\n\twidth: 100%;\n\tmargin-bottom: 40px;\n}\n\n.iframe-container::before {\n\tcontent: \"\";\n\tdisplay: block;\n\tpadding-bottom: calc(100% \/ (var(--aspect-ratio)));\n}\n\n.iframe-container iframe {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tborder: 0;\n}<\/code><\/pre>\n\n\n\n
Reference<\/h3>\n\n\n\n
https:\/\/wpdevdesign.com\/responsive-vadootv-player-and-iframes\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorial provides the steps to embed responsive maps in Oxygen using Google’s Maps Embed API. Step 1 Visit the Google maps embed API quickstart page. Follow the steps listed there to obtain an API key. Step 2 Enter your desired address or the search term or any other option available under “I want to…” …<\/p>\n","protected":false},"author":1,"featured_media":7656,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[63,64],"tags":[48],"class_list":["post-7651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-content","category-oxygen","tag-google-maps"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/responsive-google-map-embed-oxygen.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2021\/05\/responsive-google-map-embed-oxygen.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/7651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=7651"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/7651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/7656"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=7651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=7651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=7651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}