Google Maps in moodle

Google Maps in moodle

by Philipp Keppeler -
Number of replies: 3

Hi everybody,

i'd like to embed a part of google maps with an responsive iframe. I used the following code:


<script type="text/javascript">// <![CDATA[

function iframeLoaded() {

      var iFrameID = document.getElementById('idIframe');

      if(iFrameID) {

            

            iFrameID.height = "";

            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";

                  }   

  }

// ]]></script>

</p>

<div><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d5132817.6330380235!2d5.969134963948056!3d51.08523469108032!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1489137783540" id="idIframe" onload="iframeLoaded()" style="border: none;" allowfullscreen="" width="100%"> </iframe></div>


The problem ist, that the frame is only a few pixel high. Do you have any idea, how to add a container or something like that to it?


Thanks

Thomas

Average of ratings: -
In reply to Philipp Keppeler

Re: Google Maps in moodle

by RTR Admin -

You can manually set the height and width of the iframe in the code. Out of curiosity, why are you using .js to insert the snippet? Moodle accepts a straight-forward embedded HTML segment.

Average of ratings: -
In reply to RTR Admin

Re: Google Maps in moodle

by Philipp Keppeler -

Thanks for your response.

I want to add an responsive iframe, and the .js snippet was just an idea. If you have an idea how to embed the iframe with html responsive, please let me know.

Average of ratings: -
In reply to Philipp Keppeler

Re: Google Maps in moodle

by RTR Admin -

Adding a responsive iframe is done by setting the width in percentages. Typically, the whole page is responsive, so adding an HTML element in percentages will adjust its size relative to its parent element. If for some reason you're trying to add a responsive element to non-responsive page, you can add a media query to the element's id tag that will changes it based on the screen size.

Average of ratings: -