{"id":7754,"date":"2018-09-04T10:50:53","date_gmt":"2018-09-04T14:50:53","guid":{"rendered":"https:\/\/extension.umaine.edu\/plugged-in\/?page_id=7754"},"modified":"2019-09-03T10:13:30","modified_gmt":"2019-09-03T14:13:30","slug":"embed-map","status":"publish","type":"page","link":"https:\/\/extension.umaine.edu\/plugged-in\/technology-marketing-communications\/web\/tips-for-web-managers\/embed-map\/","title":{"rendered":"How to embed a Google Map into a web page"},"content":{"rendered":"

Embedding a Google map into a web page that uses UMaine\u2019s new web theme is easy, but it requires a small adjustment to the embed code.<\/p>\n

Get the embed code:<\/b><\/b><\/h3>\n

1. Go to Google maps<\/a><\/strong>. In the Search Google Maps text box, type in the address<\/strong> of the location you want to display on your web page.<\/p>\n

2. When the map appears, click on the Share<\/strong> icon.<\/p>\n

3. Select the Embed<\/strong> tab on the Share window.<\/p>\n

4. Click on Copy HTML<\/strong>.<\/p>\n

\"screenshot<\/a><\/p>\n

Embed the code in your web page:<\/b><\/h3>\n

1. Open the web page<\/strong> (in WordPress) where you want to embed the map. Place your cursor<\/strong> in the editing window where you want the map to display.<\/p>\n

2. Paste in the code<\/b> from Google:<\/p>\n

<iframe<\/span><\/strong> src=”https:\/\/www.google.com\/maps\/embed?pb=!…” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen><\/iframe><\/span><\/strong><\/p>\n

3. Change the code<\/b> as follows:<\/p>\n

Replace the “<<\/strong>” in “<iframe<\/strong>” with “[um-<\/span><\/strong>” at the start of the code and replace “><\/iframe><\/strong>” at the end of the code with just “]<\/strong><\/span>“.<\/p>\n

4. Your map will not display in the editing window<\/strong>; you\u2019ll see only the code. To view the map<\/b>, save your changes and preview the page in your browser.<\/p>\n

NOTE:<\/strong> Similar code changes need to be made when embedding a Google Calendar<\/strong> into your web page.<\/p>\n","protected":false},"excerpt":{"rendered":"

Embedding a Google map into a web page that uses UMaine\u2019s new web theme is easy, but it requires a small adjustment to the embed code. Get the embed code: 1. Go to Google maps. In the Search Google Maps text box, type in the address of the location you want to display on your […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":7741,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"templates\/page-withsidebar.php","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7754","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"","author_link":"https:\/\/extension.umaine.edu\/plugged-in\/author\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/pages\/7754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/comments?post=7754"}],"version-history":[{"count":5,"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/pages\/7754\/revisions"}],"predecessor-version":[{"id":10274,"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/pages\/7754\/revisions\/10274"}],"up":[{"embeddable":true,"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/pages\/7741"}],"wp:attachment":[{"href":"https:\/\/extension.umaine.edu\/plugged-in\/wp-json\/wp\/v2\/media?parent=7754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}