{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/2015/01/01/embedding-an-iframe-in-to-your-joomla-website/",
    "result": {"data":{"site":{"siteMetadata":{"title":"K2V Academy"}},"markdownRemark":{"id":"c0a2721c-f6f8-591e-8789-c5adc71e5c36","fields":{"slug":"/2015/01/01/embedding-an-iframe-in-to-your-joomla-website/","readingTime":{"text":"3 min read"}},"html":"<p>Recently I was working on a Joomla Website for our university. There I wanted to add a Google Map to the footer. So I tried to do it with a CustomHTML module. This was the iFrame I wanted to add.</p>\n<div class=\"gatsby-resp-iframe-wrapper\" style=\"padding-bottom: 75%; position: relative; height: 0; overflow: hidden; margin-bottom: 1.0725rem\" > <iframe src=\"https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3947.487195748568!2d80.50291299999999!3d8.353639!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afc8a63d9e8ff6d%3A0x8e08bdb2ad12375c!2sFaculty+of+Applied+Sciences!5e0!3m2!1sen!2slk!4v1420092128987&amp;w=400&amp;h=300\" frameborder=\"0\" style=\"border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; \" allowfullscreen=\"\"></iframe> </div>\n<p>So I went to Extensions > Module Manager and created a new module with the type of <strong>CustomHTML</strong> and added my code for the iFrame and selected the position of the module and saved it and went to the site. The map was not there.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 448px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/15066d3125be4b1b0c623b2c41c48f5d/33b38/01.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 80%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAIAAACZeshMAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABkElEQVQoz53RXWvbMBQG4ONedIudrpZ0ZH1/WE5cdr+7QenFGKWja2HsL6V/I+m6/c4h2ylO2jE2eDh+X8nCAsPjdvO43fzYjR4m28nTdvOUZ/Zzd+DX7gHKRVEuYHEK5ek0yzewfFuclydZBbQCVhWsKnBZ4BL4suBnRXNWiHcnIAVTkqegW6/WyfXJdVFH2zhBvUavMRhMhiWDncGVYZlla4u9ReB4LiV+/nR5d3v97f7r9/svd7c3Vx8/NLSyghhBrCBOEidrL+soSVR1K+ukMhCciIYES7vIkmfJ0y6wVYuryNYZ9hH7lvct9i1etPi+5ReBRUWiItDwWglqBXXDF4KkQRI/BeoG8+oH42v5sB7u9lfuMDtB8rWHw3SGvAivV5D5wYzMrBjR53C0bgSzs5p/Vd5WOJGYt7MhHK1PedgVDNTQneYju6/2D+vzCsY0/n+BdzI4Gf9RsCI6CTGY5E0KJgWdgx/nPgQ9W9dTDXqs0HV+lfy6PZRehNeAd9o7HZwOfj/n3LFodbRq9BtSPX8mzkT/ygAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"No Map is Displayed\"\n        title=\"No Map is Displayed\"\n        src=\"/static/15066d3125be4b1b0c623b2c41c48f5d/33b38/01.png\"\n        srcset=\"/static/15066d3125be4b1b0c623b2c41c48f5d/772e8/01.png 200w,\n/static/15066d3125be4b1b0c623b2c41c48f5d/e17e5/01.png 400w,\n/static/15066d3125be4b1b0c623b2c41c48f5d/33b38/01.png 448w\"\n        sizes=\"(max-width: 448px) 100vw, 448px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>What happened was Joomla Stripped out everything and the iFrame was removed. So no map on the website. But fortunately there is a workaround for this.</p>\n<p>What you need to do is simple. First go to <strong>Extensions > Module Manage</strong>r to open up Module Manager.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a8d965da8ea438ba0827d7a86ada10b5/e5715/2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 19.499999999999996%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA70lEQVQI1x3CXUuDUBgAYP9wqBWUmh9UjKiLfkgXFV0UBDK3lYvmGenSmkGsm7HmOe/50jRKgx4exe4dH5ycblmeurOnmY5quZrlaaarGc5/Vzc93XB0w1VNd2PX3jTt/aPetnN4dnmlDNHs/ikdoGSIZtd+eH5x498GUZKhl7coy6dpNkKTUTwPk9i/C8YPkyCK+9PXcPwYP6dKQUVBxRoElM1yscgjtJznbVN3Xdt2Xff7BfhjzWtWYrJ6/2FEVhKLqhEMipUiOP+ua8EZBcCUfmIMnAkpOReEEKCMccEYZUzIssJApZQAhHJeYPwHieW9lrseIA4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Select Module Manager from Extensions Menu\"\n        title=\"Select Module Manager from Extensions Menu\"\n        src=\"/static/a8d965da8ea438ba0827d7a86ada10b5/e5715/2.png\"\n        srcset=\"/static/a8d965da8ea438ba0827d7a86ada10b5/772e8/2.png 200w,\n/static/a8d965da8ea438ba0827d7a86ada10b5/e17e5/2.png 400w,\n/static/a8d965da8ea438ba0827d7a86ada10b5/e5715/2.png 768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>And from there Click on the <strong>New Module</strong> button to create a new module.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/552b0ba3873ce5f72acaf26b24b171fb/e5715/3.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 13.999999999999998%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAIAAAAcOLh5AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAuklEQVQI1y3CSwqCQAAAUA+sJgQ54ScooiDat2vRPUpKLNMaNB0Uo500mJqjkKRpbXo8ajCdS5MZC0SGF1hepHsCw4sskP77MicMOSB1gMwAmeZFpicMxqOuNFosV5RmIc1CKnR2p4t6dnQbma4PvSv0AujfLNs+bNeaezWQqxxU/XjSoK1Ywd44u8ij7nGGE4ITEqX545nXddV86qaumur9adtvimNzE5JXSiIcBmWEiyLDWUHSuCTPHynRhYBj3UnFAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"New Module Button\"\n        title=\"New Module Button\"\n        src=\"/static/552b0ba3873ce5f72acaf26b24b171fb/e5715/3.png\"\n        srcset=\"/static/552b0ba3873ce5f72acaf26b24b171fb/772e8/3.png 200w,\n/static/552b0ba3873ce5f72acaf26b24b171fb/e17e5/3.png 400w,\n/static/552b0ba3873ce5f72acaf26b24b171fb/e5715/3.png 768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>And you will get a popup windows to select the type of module you wanna create. What we want to do is to create a <strong>Wrapper.</strong> So select the wrapper from the popup windows.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/2065f36b9c9e6ad3167ed9e78018e19f/e5715/4.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNUlEQVQoz32RTW+CMBjH+f4fwOsWj8sienCeeDMNkmxpq8kOS7aDyZwyIggUWgp9ugDZorLtd+vzyz/PS43RaLRYPJiTydQ0Z7OpZVn2N45ju67jOo59iWVZrufd3twYCKGci10YJadUcKHPUKBFA6VsAM7LGro3pdTwPC/K+NvHZ84r6AQAqE6nrNyGx6wolVJwiVLK931juVzGTESnXA9gvNqGsZB1221ggyBowymXKSth4AtRhXHWqGGwZRUE7dgpl2GSybq50qWoolNe/5EO+nDG6zhjatC64GJ7OB5T9l84YeL1/dCv/XMSrXUu5C4rJIAG+P1gCKGy1vuEcXk9Nt/t0+cXnef9/1xZjIkxHo+fMEGrgFJKCMEdhBCK8eN87t/dE9smmw3pij0Y4/V6bZrTL7pZJpKtK9fZAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Select Wrapper from Module Types\"\n        title=\"Select Wrapper from Module Types\"\n        src=\"/static/2065f36b9c9e6ad3167ed9e78018e19f/e5715/4.png\"\n        srcset=\"/static/2065f36b9c9e6ad3167ed9e78018e19f/772e8/4.png 200w,\n/static/2065f36b9c9e6ad3167ed9e78018e19f/e17e5/4.png 400w,\n/static/2065f36b9c9e6ad3167ed9e78018e19f/e5715/4.png 768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>The wrapper would be viewed as an <strong>iFrame</strong> at any location we want the wrapper to be positioned. You can select where it is shown using the <strong>Position</strong> setting from the module settings. Then you need to take <strong>ONLY the URL</strong> from the Google Maps iFrame you want to use. And then paste the URL in the <strong>Basic Options – URL</strong> field.</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-html line-numbers\"><code class=\"language-html\">src=\"https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3947.487195748568!2d80.50291299999999!3d8.353639!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afc8a63d9e8ff6d%3A0x8e08bdb2ad12375c!2sFaculty+of+Applied+Sciences!5e0!3m2!1sen!2slk!4v1420092128987\"</code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span></span></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7dcc75ef9d282e1cf7c17dcf99460f8b/e5715/5.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB00lEQVQoz4WQ224TMRCG942pUm5AKm1ATbkoIFXqLTe8EKJNCekpSbNhd7tee30az9heoxwIbQXl11x4rPnmn5ns5POXg4+nbz+dvuy/7+0Pdg8Gu/2j3sGg1z96Ejv7hztvDl/svXt9dLx3fPJq8CGrGn6TF7d5OVlU00W1flQN5618HKpmbD6fTe/y6aLMRxfFzTjT2hT3TVHzkvH7RpSMFzWXSllrNrIWnDMABqxSrdC2VVKUhRY8AwCpdEqJtbrWKFyQGLkhRz6GEGIkgOr8Ox9fwWSirq7UaAS3tz4ER5SB4Go4TLNZOxzC+LI9O9PX16lLW0Ui8eMyFCXO52Y6dYwFKVNK3vvMWlsXZURUnGvREkDnQ0qPYDkaxTzHycTf3aW06byEnYOqqq0B7z0SaUchdg/hrosNF8ZCiBGJnIMuxg0MAMbadUJEMQQAIKKu27SIIbBGVEysDvdHAJCBUmyWt4vCtq3WRmutlNJaA0BYCRHXn09kjMlAtD+/fmPnF8AYIBIt/RHxoYn+m5YwInIppdaO6PeWCQm3s62d/wEvSxytyG4lRBRCAGxOiITPOUu5XGB7XmM0Im5T7/1zsLWWN9x7v6621jaNQKT/wr8A7S0HO4VnHikAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Module Wrapper: Options\"\n        title=\"Module Wrapper: Options\"\n        src=\"/static/7dcc75ef9d282e1cf7c17dcf99460f8b/e5715/5.png\"\n        srcset=\"/static/7dcc75ef9d282e1cf7c17dcf99460f8b/772e8/5.png 200w,\n/static/7dcc75ef9d282e1cf7c17dcf99460f8b/e17e5/5.png 400w,\n/static/7dcc75ef9d282e1cf7c17dcf99460f8b/e5715/5.png 768w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>You can specify the width and height of the iFrame and other settings such as Auto Height, Frame Border etc. from Basic Options. You can set the Menu Assignments where you want this iFrame to show up from the <strong>Menu Assignment</strong> section. And the Save your changes.</p>\n<p>And folks that is it :) Now go to the page where you set the iFrame and see it in action. I have set the iFrame (Google Map) in the Footer of each page. And now you can see the Google Map is properly displayed in the Footer (or your position of choice in your site).</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 447px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/7ab3199394d62e678a82b675e0cbeb61/a2d48/6.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 97.50000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAEWklEQVQ4y13QaWgcZRgH8Gm22WP2mtmdnd2d2ey9aWhswSQ22LRL9krskWhtm2wa0g/FaLFgLNhamthWKPhBBMV+sE2LWBDrp1JBQSpIMWqwkBZl0+bazczsNTv35miyR0d2gwq+/Hh54OX/PjwPcGn81L8uT9Tvf+r/++A/V+oAUN2gatymVgJq1TZlI6BRAqBqm1bdoNUodJoGnUahr2kwgAoDqDBqa6A6WKsA7DZzc8DldTvcTqy1xe/3NHldOG4zO+zmpjqnHXHaERdmcWOIB0O8OOJ1ID4H4ncggAnW7e9qHzjW/+rh3uGB1/oP9Rzpe8XjRHEb5MRgl93kspvcGOzBYS9u8tV5cZPXDvswGEBRyO1EdvisAS9aZ2n22Zq9toAXbfZaWryWnVt8llYf2upHdwXQHU7Eh8EBhxmwWmETpDPq1JBeBetVsEFthkALBKIQiEA6C6y1QqAN0tggDQZrMEhtMyhdVkPAYfLjJgAxG3a1Brr37Ql2vRTs6gh2tXe07W5rb9vT2dH98u5g5wvde9tCXe3hfe2hvS/27N/T3xts2+lxWw21MKjZfuP6tWqlROczAlfgWXphKTmfpIhMjqMJgaVWi/zaqlSUBFESf//lx9s3Phk7fdKia/Q7zIBGvf2rmx+vP9tIPJlbpjKLSSLxZJ4gyTRFpFJEsbgi189m+bm0ISefTt//4e57Y6OITunD6+EvJz+VZTkvbLAr5axQyolldqW8lamWS6XNzWqlWq1UqpUSn5uV5fXxc2eMGoUHQwAQbJy8cU2urLD5ZYGhBIYUGVLgMgUikfrte3r5Abk4laHmRS6XWvzr8cOp1OzM2dPHjKDShZkBLdh48/rn1VKxkEtxBZKlCY4meCHHJKZTl96hZr4jZ+6ln/6xItEcSy09mRWWHpwfG9FrVC7MAui0yskvPquWJCa/zBVIvtacEtgMk51bvn/nz7vfPLrz7cLPPyUfTtOLCVGg5dWZiXOjerXKhaGAXqeqhTclJk/wBVJgqfoXaTY3X8jNEQRJUFmSIJJLqXw6xRYyleKji+dG9aDKhaOAUQ/emrwmV9eYXK0zVyAENs0zJM+mRTZTFLIilxbZtCRkRC7L5peeS79evHBWr1W6mmwAZNRtzczkCY4mOYYUuQzPUCKXKfLZrZovUAKbFjiaT09V1xbGL5yHdCqP0w7gduuZd0ffvvLW3Nxjic9ujc0VSDqbTBPzdDYlsGmWXq7torDIkfcrlfL4+2MmI+hz40ATbrv60eWv793O5VLlDWm1yKwV2dUiI/L5XIYQ+fzmM2FjnV9fk55Ji+tCQpblqx9OoCZji98NWFFTJBx8841T8cFjQ/Hj8cGjg4NH4/FafXJkaGQ4PhQ/Pnxi8ET8+ImBI0MDr48Mx7s6O2wI7MSswOG+A729kXA4GIuGYtFQTzQUi4VjsVAsFopGuqORUDQaika7a6+RUE8kFAt3H+yN9R8+2HfowN8ZmEocB/g2CQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Map Displayed on the Footer\"\n        title=\"Map Displayed on the Footer\"\n        src=\"/static/7ab3199394d62e678a82b675e0cbeb61/a2d48/6.png\"\n        srcset=\"/static/7ab3199394d62e678a82b675e0cbeb61/772e8/6.png 200w,\n/static/7ab3199394d62e678a82b675e0cbeb61/e17e5/6.png 400w,\n/static/7ab3199394d62e678a82b675e0cbeb61/a2d48/6.png 447w\"\n        sizes=\"(max-width: 447px) 100vw, 447px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>In this scenario I have used a Google Map, but you can use any thing that you want to embed using an iFrame.</p>\n</blockquote>\n<p>Well that is neat and solves my problem. And hope it will help you out as well.  :) So once again, HAPPY NEW YEAR people. Stay with me for more posts in 2015.</p>","frontmatter":{"title":"Embedding an iFrame in to your Joomla Website","date":"January 01, 2015","originalDate":"2015-01-01","categories":["CMS","Development","Google","Google Maps","Joomla"],"author":{"id":"kasun-kodagoda","name":"Kasun Kodagoda","description":"Kasun Kodagoda is a Senior Technical Lead at 99X working on the Microsoft stack. He is an Azure Cloud and Azure DevOps enthusiasts and contributes to few Open Source projects on GitHub, mainly focusing on Azure Pipelines Extensions. OWASP ZAP Scan, Slack Notification task are some of his popular Azure DevOps extension. Kasun is also a blogger, occasional gamer and creates YouTube videos on Azure, Azure DevOps and Gaming and loves creating Architectural and Interior Design visualizations when he finds time.","profile":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEtUlEQVQ4ywXB+U9aBwAA4PdfbGmypNlhllarVao4kPt+8OA9eJxKRQWlggeoqEWEYvFCi3hwC4hCRaqAnUhhgthj2mt2R5y1y5ol+3F/w74PCG6FQsmNxMZyKRPOl46KJ8+Lx+V8pXJcLp3mkhc/rh/veAsR7242Hk6uj42OGA0GywPLesIXjK4Ang2/wzkbcowXoq78UfGgVH5WPnpaONwOBTJBZyHuW3I5Q4/DqVxiPe4bHzcNGQyj98fWYh5/1A3MLy8OGgybQWtsy3vwUyFXOg5vRmVyWX0Dpr7uFggyZ+bntvcf7+xvxp9EbXZLn14/OzuZSvu8oUeAfcYeWrMU912BsDdXyEViESqFePPb6wwcho3H1FZ93dTU5A2tpNLRnb2Iw2HR9nQvzo4WD1a9vllAPzC8Hbb+eboaDC4d5jPaHhVCbtx19JeDzrJvLmnTkxtva3WaTDa6kwrOTlu03erxMeN6YD7ofQj09A64F0f+u1g+PfLkniZkQlZoWH6+MXe2FXgRC5Rd5iERGYI42WwsmfRPTIxo1F0262gk6Ays2gHz2JCqq6uSsXx6tXBaio3qZMF+wTv/5G/J0NtNz7O5IXs7GyI1et3WzY0F42BvX2+3Z8Wx5p5yL0wAq677MkVbZ0ere85Qzoft/RK3lrWkhVe1yGIHT0a+0ycgjMo49wfU2eSU1aw3Dmj24vadiDkVMQMnadPiuHp15t6LffP7sts3LnVpGP0i6nQnsmVS+Uf78/Mji1qJAoWPn+j8j/qMetWvh4O/PNW9TWuARb10y9T2IqZ9nbx3njGVwqY9i+I8aDtaGC4/Gn48oYubOqc1YOddZGFSnvKpWxXyQlRzluyqxNqBuBVJ2KX5tbbfE5JXGz2VbadLB7nVPIeKNyKkm+T8YSG1D23x2aTloDi9JDRqJAcrknJAWPTwgUJmJZtc2016DtPLB6mVnyt7LltvNxMz1Q46NQpbO6rjk2nYGw+MaDrmeF0OnVWS56fJdy8TZydx4NNfHz5evb+8PLu6evP58/uT5/vdahm9/jsFuU5MwTKbbpPu1Ehl8i+vfYUjUFVqzfScI74deXlavLh8A/xzWfr3qvz3RSmXjU7ZhllsVnV1dZsMNQ324hobrl/7YmrGpR+2VddibtbU1dzC4Il0AonK4nCVSjlQ8Cq9k2J9J8yik4kkGvYHMpFEhQTiPz5+jm/vEihM30ZK0dnXTGSR6Fw8kcYEkRYSA0/m1NY3A6pWGI/HUagUHk/A5YvpTIgFwi1ESmIns+aP3mpoHrFMowo1kcajMiAChcMARRQ6F0/h3m5oBoRCAZ8PIyIJIpKDEMriCPjCNhKVY7Y+fPvhgsbkovIOGL3LBEUMECHSuCxITAeFd3C02gYswGAwIVjKFUggYSuMtvH4Ii6soLERdY9+b/+QQGE1YEkMjkggUrIhKZ7MYfFlBBr3Zl0TBtsC0GgMJgdhgiIuLBOKlQiq5PClTJ4EQVvd3hBP2Eqm80FYAYmUNA6KI7IZXDEGS6q6UYfFUwE2KCBS2EQqF4KlMKqEJR2gQM6GpBxIbDJPQWg7hSngIq0svpzCQnBEdhOOVvV9zTdV1Y0/kP8Hsucu/18URfsAAAAASUVORK5CYII="},"images":{"fallback":{"src":"/static/b06d893ba176e32c97ea1f1a58bfff43/b5a32/kasun-kodagoda.png","srcSet":"/static/b06d893ba176e32c97ea1f1a58bfff43/ca121/kasun-kodagoda.png 20w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/b5941/kasun-kodagoda.png 39w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/b5a32/kasun-kodagoda.png 78w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/d8a72/kasun-kodagoda.png 156w","sizes":"(min-width: 78px) 78px, 100vw"},"sources":[{"srcSet":"/static/b06d893ba176e32c97ea1f1a58bfff43/264f2/kasun-kodagoda.webp 20w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/72e27/kasun-kodagoda.webp 39w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/7a63e/kasun-kodagoda.webp 78w,\n/static/b06d893ba176e32c97ea1f1a58bfff43/d1e3d/kasun-kodagoda.webp 156w","type":"image/webp","sizes":"(min-width: 78px) 78px, 100vw"}]},"width":78,"height":78}}},"socials":{"facebook":"https://www.facebook.com/kasun.kodagoda","github":"https://github.com/kasunkv","twitter":"https://twitter.com/kasun_kodagoda","linkedin":"https://www.linkedin.com/in/kasunkodagoda","website":"https://kasunkodagoda.com"}},"description":"Embedding Google Maps in a Joomla website is pretty straight forward. Learn how you can quickly do that in this article.","tags":["Joomla","Google Maps","CMS","Development","Google"],"image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIFA//EABUBAQEAAAAAAAAAAAAAAAAAAAIB/9oADAMBAAIQAxAAAAHZJ1YqOORf/8QAGhABAAIDAQAAAAAAAAAAAAAAAgAEAQMRQf/aAAgBAQABBQKjx6rurow2JUnhan//xAAXEQADAQAAAAAAAAAAAAAAAAAAAhET/9oACAEDAQE/AVWmZ//EABcRAQADAAAAAAAAAAAAAAAAAAABAhL/2gAIAQIBAT8BtLb/xAAdEAACAgEFAAAAAAAAAAAAAAAAAQIRECExMkGR/9oACAEBAAY/Ane6YnGOt9FKHqJ45M//xAAbEAADAAMBAQAAAAAAAAAAAAAAAREhMVFhcf/aAAgBAQABPyF261kVg56OCu+bBnErksN/KwQvr0//2gAMAwEAAgADAAAAEG8f/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERYf/aAAgBAwEBPxCKi0f/xAAXEQEAAwAAAAAAAAAAAAAAAAAAARFx/9oACAECAQE/EKZZf//EABwQAQADAAIDAAAAAAAAAAAAAAEAESFBUWFxkf/aAAgBAQABPxAMoK7rGkjMXcKxDeHUTBNpav2DDg6ZdmwxXWxPHqeY3nP/2Q=="},"images":{"fallback":{"src":"/static/42eca68149476a80de4e777d060798b4/333cc/featured.jpg","srcSet":"/static/42eca68149476a80de4e777d060798b4/fd1a3/featured.jpg 300w,\n/static/42eca68149476a80de4e777d060798b4/c5f00/featured.jpg 600w,\n/static/42eca68149476a80de4e777d060798b4/333cc/featured.jpg 1200w","sizes":"(min-width: 1200px) 1200px, 100vw"},"sources":[{"srcSet":"/static/42eca68149476a80de4e777d060798b4/7987b/featured.webp 300w,\n/static/42eca68149476a80de4e777d060798b4/8a009/featured.webp 600w,\n/static/42eca68149476a80de4e777d060798b4/c06d5/featured.webp 1200w","type":"image/webp","sizes":"(min-width: 1200px) 1200px, 100vw"}]},"width":1200,"height":576},"resize":{"src":"/static/42eca68149476a80de4e777d060798b4/47498/featured.jpg","height":576,"width":1200}}}}},"previous":{"fields":{"slug":"/2014/12/26/quickly-add-google-maps-into-your-angular-js-app/"},"frontmatter":{"title":"Quickly Add Google Maps into Your Angular.js App","date":"December 26, 2014","image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAEDBAX/xAAUAQEAAAAAAAAAAAAAAAAAAAAC/9oADAMBAAIQAxAAAAHGc1VhiCv/xAAXEAEAAwAAAAAAAAAAAAAAAAAQAxEx/9oACAEBAAEFAqZMP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABUQAQEAAAAAAAAAAAAAAAAAABAB/9oACAEBAAY/AmP/xAAaEAACAgMAAAAAAAAAAAAAAAAAEQEQITFB/9oACAEBAAE/IcEziYlupJJ//9oADAMBAAIAAwAAABBcL//EABYRAQEBAAAAAAAAAAAAAAAAAAABMf/aAAgBAwEBPxC6j//EABcRAQEBAQAAAAAAAAAAAAAAAAEAITH/2gAIAQIBAT8QOSbf/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSFh/9oACAEBAAE/EBMHjKtBFZ2NlcM0esTes1P/2Q=="},"images":{"fallback":{"src":"/static/093c11f32bcb347cebdf2e7d35573708/c5f00/featured.jpg","srcSet":"/static/093c11f32bcb347cebdf2e7d35573708/caff5/featured.jpg 150w,\n/static/093c11f32bcb347cebdf2e7d35573708/fd1a3/featured.jpg 300w,\n/static/093c11f32bcb347cebdf2e7d35573708/c5f00/featured.jpg 600w,\n/static/093c11f32bcb347cebdf2e7d35573708/333cc/featured.jpg 1200w","sizes":"(min-width: 600px) 600px, 100vw"},"sources":[{"srcSet":"/static/093c11f32bcb347cebdf2e7d35573708/78240/featured.webp 150w,\n/static/093c11f32bcb347cebdf2e7d35573708/7987b/featured.webp 300w,\n/static/093c11f32bcb347cebdf2e7d35573708/8a009/featured.webp 600w,\n/static/093c11f32bcb347cebdf2e7d35573708/c06d5/featured.webp 1200w","type":"image/webp","sizes":"(min-width: 600px) 600px, 100vw"}]},"width":600,"height":288}}}}},"next":{"fields":{"slug":"/2015/06/21/installing-protractor-for-end-to-end-testing-of-angular-js-apps/"},"frontmatter":{"title":"Installing Protractor for End-to-End testing of Angular.js Apps","date":"June 21, 2015","image":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAFlbkQ1kv8A/8QAHBAAAQQDAQAAAAAAAAAAAAAAAQACAxEEEhMy/9oACAEBAAEFAoS+5JdW9LTPOQB0IC//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAaEAACAgMAAAAAAAAAAAAAAAABEQAQIjFR/9oACAEBAAY/AgFj2BJ3qv/EABwQAQACAgMBAAAAAAAAAAAAAAEAESExQVGBof/aAAgBAQABPyEwBcfUzAm/IjJN9TIXAUBVwHBqf//aAAwDAQACAAMAAAAQvy//xAAXEQADAQAAAAAAAAAAAAAAAAAAASEx/9oACAEDAQE/EFtGf//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAgEBPxCRr//EABoQAQADAQEBAAAAAAAAAAAAAAEAESFBUTH/2gAIAQEAAT8QtT59UjDoS23Q+tRgJiziewzspAcQyKAEAwJ//9k="},"images":{"fallback":{"src":"/static/a6809c17ed3581347dbb93f91e0ef2ad/c5f00/featured.jpg","srcSet":"/static/a6809c17ed3581347dbb93f91e0ef2ad/caff5/featured.jpg 150w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/fd1a3/featured.jpg 300w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/c5f00/featured.jpg 600w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/333cc/featured.jpg 1200w","sizes":"(min-width: 600px) 600px, 100vw"},"sources":[{"srcSet":"/static/a6809c17ed3581347dbb93f91e0ef2ad/78240/featured.webp 150w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/7987b/featured.webp 300w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/8a009/featured.webp 600w,\n/static/a6809c17ed3581347dbb93f91e0ef2ad/c06d5/featured.webp 1200w","type":"image/webp","sizes":"(min-width: 600px) 600px, 100vw"}]},"width":600,"height":288}}}}},"sidebarData":{"tags":[{"tag":".Net Core","totalCount":13},{"tag":"ARM","totalCount":2},{"tag":"ASP.Net Core","totalCount":17},{"tag":"AVD","totalCount":2},{"tag":"Active Directory","totalCount":7},{"tag":"Android","totalCount":2},{"tag":"Android Emulator","totalCount":1},{"tag":"Angular.JS","totalCount":3},{"tag":"Animation","totalCount":3},{"tag":"Api Management","totalCount":1},{"tag":"App Configuration","totalCount":14},{"tag":"App Service","totalCount":9},{"tag":"Application Insights","totalCount":1},{"tag":"Aurelia","totalCount":7},{"tag":"Automation","totalCount":1},{"tag":"AzSK","totalCount":3},{"tag":"Azure","totalCount":48},{"tag":"Azure Automation","totalCount":1},{"tag":"Azure CLI","totalCount":2},{"tag":"Azure DevOps","totalCount":16},{"tag":"Azure DevOps Extensions","totalCount":2},{"tag":"Azure Functions","totalCount":8},{"tag":"Azure Pipelines","totalCount":2},{"tag":"Azure Policy","totalCount":1},{"tag":"Azure Resource Manager","totalCount":4},{"tag":"Azure Resource Providers","totalCount":1},{"tag":"Azure Security","totalCount":2},{"tag":"Azure Subscription","totalCount":1},{"tag":"Branching Strategy","totalCount":2},{"tag":"Build Tasks","totalCount":1},{"tag":"C#","totalCount":9},{"tag":"CMS","totalCount":1},{"tag":"Certificates","totalCount":1},{"tag":"Chrome","totalCount":1},{"tag":"Cloud","totalCount":24},{"tag":"Cloud Patterns","totalCount":1},{"tag":"Cloud Security","totalCount":2},{"tag":"Code Quality","totalCount":2},{"tag":"Compliance","totalCount":1},{"tag":"Configuration Management","totalCount":2},{"tag":"Continuous Delivery","totalCount":3},{"tag":"Continuous Deployment","totalCount":1},{"tag":"Continuous Integration","totalCount":2},{"tag":"Counter Expressions","totalCount":1},{"tag":"Custom Controls","totalCount":3},{"tag":"Custom Extensions","totalCount":1},{"tag":"DNS","totalCount":1},{"tag":"Debugging","totalCount":1},{"tag":"Dependency Injection","totalCount":4},{"tag":"DevOps","totalCount":23},{"tag":"Development","totalCount":33},{"tag":"Documentation","totalCount":1},{"tag":"Dynamic Refresh","totalCount":1},{"tag":"Emulator","totalCount":3},{"tag":"End-to-End Testing","totalCount":1},{"tag":"Error Tracking","totalCount":1},{"tag":"Extensions","totalCount":2},{"tag":"Feature Flags","totalCount":7},{"tag":"Feature Management","totalCount":13},{"tag":"Federated Identity","totalCount":1},{"tag":"FireFox OS","totalCount":1},{"tag":"Git","totalCount":4},{"tag":"GitFlow","totalCount":2},{"tag":"GitHub","totalCount":3},{"tag":"Google","totalCount":1},{"tag":"Google Maps","totalCount":2},{"tag":"Governance","totalCount":1},{"tag":"HAXM","totalCount":2},{"tag":"Hypervisor","totalCount":1},{"tag":"IaaS","totalCount":1},{"tag":"Implicit Typing","totalCount":1},{"tag":"JSON Templates","totalCount":1},{"tag":"JavaScript","totalCount":11},{"tag":"Joomla","totalCount":1},{"tag":"Key Rotation","totalCount":1},{"tag":"Key Vault","totalCount":8},{"tag":"Late Binding","totalCount":1},{"tag":"Localization","totalCount":1},{"tag":"Managed Identity","totalCount":8},{"tag":"Marketing","totalCount":1},{"tag":"Microsoft","totalCount":16},{"tag":"Monitoring","totalCount":1},{"tag":"NPM","totalCount":1},{"tag":"Networking","totalCount":1},{"tag":"NuGet","totalCount":1},{"tag":"OWASP","totalCount":4},{"tag":"OWASP ZAP","totalCount":4},{"tag":"Offline Cache","totalCount":2},{"tag":"Online Presence","totalCount":1},{"tag":"OpenSSL","totalCount":1},{"tag":"OpenSource","totalCount":1},{"tag":"PHP","totalCount":1},{"tag":"PaaS","totalCount":1},{"tag":"Personal Development","totalCount":1},{"tag":"PhpStorm","totalCount":1},{"tag":"PowerShell","totalCount":3},{"tag":"Premium Hosting","totalCount":1},{"tag":"Protractor","totalCount":1},{"tag":"Pull Requests","totalCount":1},{"tag":"Release Pipeline","totalCount":1},{"tag":"SEO","totalCount":1},{"tag":"SPA","totalCount":8},{"tag":"SQL Server","totalCount":2},{"tag":"Security","totalCount":17},{"tag":"Security Center","totalCount":1},{"tag":"Security Testing","totalCount":4},{"tag":"Sentry","totalCount":1},{"tag":"Serverless","totalCount":6},{"tag":"Service Bus","totalCount":1},{"tag":"Sharpen Your C#","totalCount":3},{"tag":"SonarQube","totalCount":2},{"tag":"Testing","totalCount":6},{"tag":"Tips & Tricks","totalCount":10},{"tag":"Tracking Branches","totalCount":1},{"tag":"USB Disks","totalCount":1},{"tag":"VSTS","totalCount":1},{"tag":"VT-X","totalCount":1},{"tag":"Validation","totalCount":1},{"tag":"Version Control","totalCount":3},{"tag":"Virtual Machines","totalCount":4},{"tag":"Visual Studio","totalCount":6},{"tag":"Visual Studio Code","totalCount":1},{"tag":"Visual Studio Team Services","totalCount":1},{"tag":"Wiki","totalCount":1},{"tag":"Windows","totalCount":1},{"tag":"Windows Phone","totalCount":5},{"tag":"XAML","totalCount":3},{"tag":"XDebug","totalCount":1}],"categories":[{"category":".Net Core","totalCount":20},{"category":"ASP.Net Core","totalCount":21},{"category":"Active Directory","totalCount":8},{"category":"Android","totalCount":2},{"category":"Angular.JS","totalCount":3},{"category":"Animation","totalCount":3},{"category":"Api Management","totalCount":1},{"category":"App Configuration","totalCount":14},{"category":"App Service","totalCount":15},{"category":"Application Insights","totalCount":1},{"category":"Aurelia","totalCount":7},{"category":"AzSK","totalCount":3},{"category":"Azure","totalCount":49},{"category":"Azure CLI","totalCount":3},{"category":"Azure DevOps","totalCount":19},{"category":"Azure DevOps Extensions","totalCount":3},{"category":"Azure Functions","totalCount":7},{"category":"Azure Pipelines","totalCount":2},{"category":"Azure Policy","totalCount":1},{"category":"Azure Resource Manager","totalCount":2},{"category":"Azure Subscription","totalCount":1},{"category":"C#","totalCount":15},{"category":"CMS","totalCount":1},{"category":"Chrome","totalCount":1},{"category":"Cloud","totalCount":41},{"category":"Cloud Patterns","totalCount":1},{"category":"Code Quality","totalCount":3},{"category":"Compliance","totalCount":1},{"category":"Configuration Management","totalCount":2},{"category":"Continuous Delivery","totalCount":6},{"category":"Custom Controls","totalCount":3},{"category":"DNS","totalCount":1},{"category":"Debugging","totalCount":1},{"category":"Dependency Injection","totalCount":4},{"category":"Design Patterns","totalCount":1},{"category":"DevOps","totalCount":29},{"category":"Development","totalCount":77},{"category":"Emulator","totalCount":2},{"category":"End-to-End Testing","totalCount":1},{"category":"Extension Development","totalCount":1},{"category":"Feature Flags","totalCount":7},{"category":"Feature Management","totalCount":7},{"category":"FireFox OS","totalCount":1},{"category":"Git","totalCount":5},{"category":"Git Workflows","totalCount":3},{"category":"GitHub","totalCount":6},{"category":"Google","totalCount":1},{"category":"Google Maps","totalCount":2},{"category":"Governance","totalCount":1},{"category":"IDE","totalCount":1},{"category":"IaaS","totalCount":1},{"category":"Identity","totalCount":2},{"category":"JavaScript","totalCount":11},{"category":"Joomla","totalCount":1},{"category":"Key Rotation","totalCount":1},{"category":"Key Vault","totalCount":8},{"category":"Localization","totalCount":1},{"category":"Managed Identity","totalCount":6},{"category":"Marketing","totalCount":1},{"category":"Microsoft","totalCount":43},{"category":"Networking","totalCount":1},{"category":"OWASP","totalCount":3},{"category":"Online Presence","totalCount":1},{"category":"PHP","totalCount":1},{"category":"PaaS","totalCount":6},{"category":"Personal Development","totalCount":1},{"category":"Protractor","totalCount":1},{"category":"SPA","totalCount":1},{"category":"SSL","totalCount":1},{"category":"Security","totalCount":21},{"category":"Security Center","totalCount":1},{"category":"Serverless","totalCount":6},{"category":"Sharpen Your C#","totalCount":3},{"category":"Single Page Applications","totalCount":8},{"category":"Social Media","totalCount":1},{"category":"SonarQube","totalCount":2},{"category":"Testing","totalCount":3},{"category":"Tips & Tricks","totalCount":12},{"category":"Virtual Machines","totalCount":7},{"category":"Visual Studio","totalCount":11},{"category":"Visual Studio Code","totalCount":2},{"category":"Visual Studio Team Services","totalCount":1},{"category":"Windows Phone","totalCount":5},{"category":"XAML","totalCount":3}],"archives":[{"archive":"2014","totalCount":14},{"archive":"2015","totalCount":2},{"archive":"2016","totalCount":10},{"archive":"2017","totalCount":23},{"archive":"2018","totalCount":14},{"archive":"2019","totalCount":16},{"archive":"2020","totalCount":13}]}},"pageContext":{"id":"c0a2721c-f6f8-591e-8789-c5adc71e5c36","previousPostId":"0cb7a1d7-0960-5723-8ca1-a335b9bc27c6","nextPostId":"5c6aa7e4-0c4f-5565-8576-81cfcc146a27"}},
    "staticQueryHashes": ["4067043902"]}