How to show map in lightbox
There are situations when you may want to display the map inside a lightbox (or a dialog window). It can be useful if you want to give some more interaction on your website or to show the map only if it is required by the user. In such case the user should click a link or a button in order to open a lightbox with a Map widget inside. This is an example of how MapEx widget works from one of my websites. You have a page with buttons:
If you click the Yellow Pig or the Blue "Alpari" Building button, a popup will appear with MapEx inside of it. Screenshot of clicking on the Pig:
Screenshot of clicking on the "Alpari" Building:
Click here to access the web page above to try the example in your browser.
To be precise, a lightbox can't be used here, because it's not suitable for rendering of widgets (it's only good for images). We should use modals instead. Both of them are parts of the UIKit which is used as a core in all widgets. So, you don't need to include the UIkit, you can just go straight forward and use it on your website. The official documentation how to use the modals is available here.
So, let's assume we have a MapEx widget with ID XX. It means, that we should use the following code in order to display it as plugin:
[widgetkit id = "XX"]If you want to use the examples here all you need to do is to change the XX everywhere in the code to the correct ID number that is assigned to your widget. On the web page we must create a link or a button (image) that will be clickable and that will open a modal with a map inside of it. This is an example of the Pig button:
<a href="#modal-box" data-uk-modal="{center:true}">
<p class="uk-text-center"><img src="https://raw.githubusercontent.com/wiki/rvalitov/widgetkit-map-ex/images/piggy_bank-256.png" class="uk-animation-shake uk-animation-hover"></p>
<h4>Show map</h4>
</a>Or you can use a more simple text link:
<a href="#modal-box" data-uk-modal="{center:true}">Show map</a>The #modal-box is the ID of the modal that will show up when the user clicks the link. You can set this to any unique arbitrary string. The data-uk-modal specifies extra parameters for the modal. In our case I use it to center the modal on the screen. Then you need to put the HTML code of the modal inside the page. Usually, you can put it anywhere, and it's not a problem, because the code is not visible when the page is rendered in the browser. The uk-animation-shake and uk-animation-hover classes add the animation effects to the Pig button. In our example the HTML code for modal will look like this:
<div id="modal-box" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-large">
<a class="uk-modal-close uk-close"></a>
<div class="uk-modal-header"><h3>Our offices</h3></div>
<div class="uk-overflow-container">
<p>You may choose the office close to you</p>
[widgetkit id="XX"]
<p>List of offices:
<ul>
<li>Проспект Победы д. 91, магазин «Ашан» <a href="https://www.google.ru/maps/place/%D0%90%D1%88%D0%B0%D0%BD/@55.7698072,49.2186671,17z/data=!4m7!1m4!3m3!1s0x415eadfa737f5db7:0x7bb656cbb79711f9!2z0L_RgC4g0J_QvtCx0LXQtNGLLCA5MSwg0JrQsNC30LDQvdGMLCDQoNC10YHQvy4g0KLQsNGC0LDRgNGB0YLQsNC9LCA0MjAxNDA!3b1!3m1!1s0x0000000000000000:0xdd511973bdba056c" target="_blank">(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Проспект победы д. 182 б, клиника «Айболит» <a href="https://www.google.ru/maps/place/%D0%90%D0%B9%D0%B1%D0%BE%D0%BB%D0%B8%D1%82/@55.7915544,49.2222047,17z/data=!3m1!4b1!4m2!3m1!1s0x415eb27200c3dbe5:0xc4e60b204aa55a4f" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Меридианная д. 11 б, клиника «Айболит» <a href="https://www.google.ru/maps/place/%D0%90%D0%B9%D0%B1%D0%BE%D0%BB%D0%B8%D1%82/@55.823285,49.1163603,19z/data=!4m2!3m1!1s0x0:0x60ebe4465407b483" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Габишева д. 23, магазин «ИП Огневская» <a href="https://www.google.ru/maps/place/%D1%83%D0%BB.+%D0%9A%D0%BE%D0%BC%D0%B8%D1%81%D1%81%D0%B0%D1%80%D0%B0+%D0%93%D0%B0%D0%B1%D0%B8%D1%88%D0%B5%D0%B2%D0%B0,+23,+%D0%9A%D0%B0%D0%B7%D0%B0%D0%BD%D1%8C,+%D0%A0%D0%B5%D1%81%D0%BF.+%D0%A2%D0%B0%D1%82%D0%B0%D1%80%D1%81%D1%82%D0%B0%D0%BD,+420141/@55.752909,49.238154,17z/data=!3m1!4b1!4m2!3m1!1s0x415eae0558b8610f:0x260fd9a00a5b5abd" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Даурская д. 12, клиника «Корл» <a href="https://www.google.ru/maps/place/%D0%9A%D0%9E%D0%A0%D0%9B/@55.7622638,49.1492955,17z/data=!3m1!4b1!4m2!3m1!1s0x415eadb3e59d5541:0x681e0595223feb8f" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Декабристов д. 114, магазин «Железо» <a href="https://www.google.ru/maps/place/%D0%96%D0%B5%D0%BB%D0%B5%D0%B7%D0%BE/@55.8286671,49.0825863,17z/data=!3m1!4b1!4m2!3m1!1s0x415952b95fcbed3f:0xe42608cadbd8d12b" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Декабристов д. 205, магазин «Железо» <a href="https://www.google.ru/maps/place/%D1%83%D0%BB.+%D0%94%D0%B5%D0%BA%D0%B0%D0%B1%D1%80%D0%B8%D1%81%D1%82%D0%BE%D0%B2,+205,+%D0%9A%D0%B0%D0%B7%D0%B0%D0%BD%D1%8C,+%D0%A0%D0%B5%D1%81%D0%BF.+%D0%A2%D0%B0%D1%82%D0%B0%D1%80%D1%81%D1%82%D0%B0%D0%BD,+420039/@55.8404324,49.0801629,17z/data=!3m1!4b1!4m2!3m1!1s0x41595299baeac1b7:0xff61745e7a12e629" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Фрунзе д. 5, магазин «Железо» <a href="https://www.google.ru/maps/place/%D1%83%D0%BB.+%D0%A4%D1%80%D1%83%D0%BD%D0%B7%D0%B5,+5,+%D0%9A%D0%B0%D0%B7%D0%B0%D0%BD%D1%8C,+%D0%A0%D0%B5%D1%81%D0%BF.+%D0%A2%D0%B0%D1%82%D0%B0%D1%80%D1%81%D1%82%D0%B0%D0%BD,+420033/@55.824093,49.046487,17z/data=!3m1!4b1!4m2!3m1!1s0x415952e7953ed223:0x1c3427b712e77fe9" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Ямашева 27, «Лаб клиник» <a href="https://www.google.ru/maps/place/%D0%9B%D0%B0%D0%B1-%D0%9A%D0%BB%D0%B8%D0%BD%D0%B8%D0%BA/@55.8266862,49.104453,17z/data=!3m1!4b1!4m2!3m1!1s0x415952ae12c68079:0xde3155d24361a66c" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
<li>Ямашева д. 115 а, «Кид Спейс» Казань Арена <a href="https://www.google.ru/maps/place/%D0%9A%D0%B8%D0%B4%D0%A1%D0%BF%D0%B5%D0%B9%D1%81/@55.8206873,49.1611701,17z/data=!3m1!4b1!4m2!3m1!1s0x415eb2a3776906a1:0x52da88f33d7ff6ef" target="_blank" >(карта<i class="uk-icon-map-marker"></i>)</a></li>
</ul>
</p>
</div>
</div>
</div>The first part of the code above defines a large modal dialog with a close button, dialog header and overflow container (so, that the vertical scrollbars become visible if necessary, but the whole content is always displayed and is not cropped which is useful when the dialog opens on a small screen device like a smartphone). Then we just add the MapEx widget using the code:
[widgetkit id="XX"]After that we list the locations of our offices - it's an optional part, you may use such approach if you find it useful and user-friendly. Each link opens the location of the selected office in Google Maps in a new window.
When you put your widget inside the Joomla's Custom HTML Module, you need to activate the option that renders the plugin:
Otherwise, the plugin code won't be rendered and you won't see your widget on the page. It's a Joomla-specific behaviour that you should keep in mind when using plugins.
You can use the code above with MapEx and with original Yootheme Map widget. However, only the MapEx will display correctly inside the modal. There's a problem with the original Map widget when the widget is not rendered correctly when displayed inside the modal dialog: the map tiles are not rendered completely or partly, so the widget is not visible properly. This MapEx widget fixes this issue.