Forklaring
For embedding av iframe med Mazemap innhold, har vi flere løsninger, beskrevet i Mazemap sin dokumentasjon.
Man kan bruke følgende snippet til emebedding:
<iframe width="100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?config=uio&utm_medium=iframe" style="border: 1px solid grey" allow="geolocation"></iframe>
Da får man opp det samme viewet som lenken https://use.mazemap.com/#v=1&config=uio
Fremheving av område
Om dere ønsker å fremheve et område, må dere legge til &campusid=X i lenken. For campus Blindern ser koden slik ut:
<iframe width="100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?config=uio&campusid=797&utm_medium=iframe" style="border: 1px solid grey" allow="geolocation"></iframe>
Her finner dere campus IDer for de forskjellige campuser:
· Campus Blindern = 797
· Campus Gaustad = 799
· Campus Geitmyra = 800
· Campus Sentrum = 801
· Campus Andre Oslo
o Silurveien (AN36)= 814
o Sandakerveien 130 (AN39)= 815
Da er det bare å sette inn de riktige IDene per område.
I tillegg, hvis dere ønsker å ha viewer per bygg, må dere legge til koordinatene som dere kan ta ut fra kartet og sette de inn i koden. Dette må dere gjøre:
- Åpner kartet -> https://use.mazemap.com/#v=1&config=uio
- Juster kartvisning slik at et bygg er valgt. (f.eks. Georg Sverdrups hus)
- Kopier koordinatene fra nettsidens URL:
- Deretter settes dettee inn disse i koden, slik at snippet ser følgende ut:
<iframe width="100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?config=uio&campusid=797¢er=10.721605,59.939002&zoom=19.2&utm_medium=iframe" style="border: 1px solid grey" allow="geolocation"></iframe>
Linke spesifikke bygg eller rom
Man kan også sette inn en rom/bygg-link inn i snippeten, slik som for rom 3420, der nettside URL'en er
https://use.mazemap.com/#v=1&zlevel=3¢er=10.716896,59.943533&zoom=20.4&sharepoitype=poi&sharepoi=1000986447&campusid=799
der snippetten blir blir
<iframe width="100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/#v=1&zlevel=3¢er=10.716896,59.943533&zoom=20.4&sharepoitype=poi&sharepoi=1000986447&campusid=799&utm_medium=iframe" style="border: 1px solid grey" allow="geolocation"></iframe>
og ser ut som;
Flere eksempler
Div tester av iframe embedding, med kildekode under
Først en variasjon til av den over, der iframet har større høyde og viewet er zoomet litt ut
![](/tjenester/it/adm-app/mazemap/hjelp/image-20220715100529-1.png)
Map by MazeMap
<iframe width="600" height="420" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0" src="https://use.mazemap.com/embed.html#v=1&config=uio¢er=10.721570,59.938944&zoom=17.9&zlevel=1&campusid=797&sharepoitype=poi&sharepoi=1000948888&utm_medium=iframe" style={{ border: '1px solid grey' }} allow="geolocation"></iframe><br/><small><a href="https://www.mazemap.com/">Map by MazeMap</a></small>
Den kunne nok trengt litt mer høyde og zoomet litt ut
Map by MazeMap
<iframe width="600" height="800" frameBorder="0" scrolling="no" marginHeight="0" marginWidth="0" src="https://use.mazemap.com/embed.html#v=1&config=uio¢er=10.721570,59.938944&zoom=17&zlevel=1&campusid=797&sharepoitype=poi&sharepoi=1000948888&utm_medium=iframe" style={{ border: '1px solid grey' }} allow="geolocation"></iframe><br/><small><a href="https://www.mazemap.com/">Map by MazeMap</a></small>