iFrame embedding av Mazemap på nettside

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: 

1. Åpner kartet -> https://use.mazemap.com/#v=1&config=uio 
2. Juster kartvisning slik at et bygg er valgt. (f.eks. Georg Sverdrups hus) 
3. Kopier koordinatene fra nettsidens URL: 
4. 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&center=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&center=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&center=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

 

 

 

 

<iframe frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="https://use.mazemap.com/#v=1&amp;zlevel=3&amp;center=10.716935,59.943519&amp;zoom=19&amp;campusid=799&amp;sharepoitype=poi&amp;sharepoi=1000986447&amp;utm_medium=iframe" style="border: 1px solid grey" width="100%"></iframe>

 

 

----------------

 

 

Også et eksempel på hva som skjer når man embedder fra mazemap sin "Share" -> "Embed" funksjonalitet på et bygg eller rom sin pop-up boks

 

 

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&center=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&center=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>