{"id":12187,"date":"2021-11-10T13:04:26","date_gmt":"2021-11-10T18:04:26","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=12187"},"modified":"2025-11-18T09:46:05","modified_gmt":"2025-11-18T14:46:05","slug":"campus-map","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/iframes\/campus-map\/","title":{"rendered":"Embedding a UNC Campus Map"},"content":{"rendered":"<p>UNC-Chapel Hill partnered with Concept3D (used to be Campus Bird) to develop an elegant and powerful mapping solution for our campus. Maps and directions can be printed, shared, and embedded in UNC websites. <a href=\"https:\/\/maps.unc.edu\/\">Visit the campus maps website<\/a>.<\/p>\n<p>For questions about the maps themselves, please use the <a href=\"https:\/\/maps.unc.edu\/help\/\">Contact form<\/a> or email <a href=\"mailto:maps@unc.edu\" target=\"_self\" rel=\"noopener\">maps@unc.edu<\/a>.<\/p>\n<h2>How to Embed a Map<\/h2>\n<p>Copy the following code and paste it into your web page.<\/p>\n<p><code>[iframe title=\"School of Medicine Buildings\" src=\"https:\/\/map.concept3d.com\/?id=111#!ce\/1534?ct\/13923?mc\/35.90389192570265,-79.05052219314582?z\/16?lvl\/0\" width=\"100%\" height=\"600px\" style=\"border:1px solid #333; \"][\/iframe]<\/code><\/p>\n<p>The above code will display the following map with pins on School of Medicine buildings:<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" title=\"School of Medicine Buildings\" src=\"https:\/\/map.concept3d.com\/?id=111#!ce\/1534?ct\/13923?mc\/35.90389192570265,-79.05052219314582?z\/16?lvl\/0\" width=\"100%\" height=\"600px\" style=\"border:1px solid #333; \" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Customizing the Map View<\/h2>\n<p>Customizing the view will allow you to highlight specific buildings or locations in the map like the example below that highlights Bondurant Hall.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" title=\"Bondurant Hall\" src=\"https:\/\/map.concept3d.com\/?id=111#!m\/104787?ce\/1529?mc\/35.906197000000006,-79.052193?z\/18?lvl\/0\" width=\"100%\" height=\"600px\" frameborder=\"1\" scrolling=\"yes\" style=\"border:1px solid #333; \" class=\"iframe-class\"><\/iframe>\n\n<p>&nbsp;<\/p>\n<p>1. Copy the following code and paste it into your webpage.<\/p>\n<p><code>[iframe title=\"Your Title Here\" src=\"\" width=\"100%\" height=\"600px\" style=\"border:1px solid #333; \"][\/iframe]<\/code><\/p>\n<p>2. In another browser tab\/window, go to <a href=\"https:\/\/maps.unc.edu\/\">Campus Maps<\/a>. Use the options in the left menu to narrow the display options down to a specific building or set of locations. For example, you may wish to uncheck Carolina Together (it&#8217;s checked by default), then select the options you wish to display.<\/p>\n<p>One way to drill down to School of Medicine buildings is select <strong>Buildings &gt; Health Affairs &gt; School of Medicine<\/strong> in the left navigation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12208\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/navigation-unc-maps.png\" alt=\"screenshot of the navigation in UNC Campus Maps.\" width=\"250\" height=\"310\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/navigation-unc-maps.png 450w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/navigation-unc-maps-242x300.png 242w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/p>\n<p>3. Once the maps shows what you wish to display, click on the <strong>Share Map View<\/strong> button in the top right. It&#8217;s the button that has three dots connected by two lines and looks like a V on its side. Once you click on it, it will tell you &#8220;LINK COPIED.&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12210\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/share-map-view-icon.png\" alt=\"Share map view icon.\" width=\"44\" height=\"31\" \/><\/p>\n<p>4. Go back to your web page and paste the code you just copied <strong>inside the quotes<\/strong> of the <code class=\"inline\">src=\"\"<\/code> value.<\/p>\n<p>5. Replace the <strong>Your Title Here<\/strong>\u00a0placeholder text (in the <strong>title<\/strong> attribute) with the name or description of what the map displays. For example, in the map above, I set title=&#8221;Bondurant Hall.&#8221;<\/p>\n<p>6. Your code should look similar to the code below.<\/p>\n<p><code>[iframe title=\"Bondurant Hall\" src=\"https:\/\/map.concept3d.com\/?id=111#!m\/104787?ce\/1529?mc\/35.906197000000006,-79.052193?z\/18?lvl\/0\" width=\"100%\" height=\"600px\" style=\"border:1px solid #333; \"]<\/code><\/p>\n<p>7. If the location you want is not available, you can <a href=\"https:\/\/maps.unc.edu\/help\/\">request a new campus location.<\/a><\/p>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Modifying the Map Size<\/h2>\n<p>You can change the dimensions of the map by modifying the <strong>width<\/strong> and <strong>height<\/strong> attributes. You can insert a fixed sizes in pixels such as <code class=\"inline\">height=\"640px\" width=\"480px\"<\/code>. You can also use a percentage based method to adjust the iFrame automatically such as <code class=\"inline\">width=\"100%\"<\/code>. Or, you can use a combination of the two.<\/p>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Examples<\/h2>\n<p>The <a href=\"https:\/\/uat-unc-med.pantheonsite.io\/intranet\/maps\/\">School of Medicine Intranet<\/a> website embeds a Campus Map on their website.<\/p>\n<p><span class=\"imgBorderMed\"><a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12220\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website.png\" alt=\"Screenshot of School of Medicine website displaying the embedded Campus Map, links to larger version of same screenshot.\" width=\"600\" height=\"410\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website.png 1496w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website-300x205.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website-1024x700.png 1024w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website-768x525.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website-600x410.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/11\/school-of-medicine-intranet-website-560x383.png 560w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UNC-Chapel Hill partnered with Concept3D (used to be Campus Bird) to develop an elegant and powerful mapping solution for our campus. Maps and directions can be printed, shared, and embedded in UNC websites. Visit the campus maps website. For questions about the maps themselves, please use the Contact form or email maps@unc.edu. How to Embed &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/iframes\/campus-map\/\" aria-label=\"Read more about Embedding a UNC Campus Map\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":12139,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-12187","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=12187"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12187\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/12139"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=12187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}