How to add Youtube Embed Modal to Google Map
CHALLENGE: Clicking ‘read more’ inside the infobox Google Map window should open a lightbox with a YouTube embedded video.
SOLUTION: Configure Magnific Popup and add a custom javascript onclick event.
A short description or a photo can be very informative, but a video surely adds a dynamic touch to an otherwise static image of a Google Map. Here is how we do it.
Let’s say, there is a Google Map with markers. After clicking, an infobox, a window appears and provides the details – a description and a ‘Read more’ button. We want to add a modal with a YouTube embedded video, but this is a tricky one. The infobox window is generated dynamically, thus, standard javascript initialization will not work.
We are using ‘WP Google Map Pro’ plugin – version 5.2.7, but this solution can also be applied for standalone Google Map javascript implementation.
Solution
Add proper infobox HTML markup
<div class="fc-item-box fc-item-no-padding">
{post_featured_image}
<div class="fc-itemcontent-padding">
<div class="fc-item-padding-content_20">
<div class="fc-item-meta fc-item-secondary-text-color fc-item-top-space fc-text-center">{post_categories}</div>
<div class="fc-item-title fc-item-primary-text-color fc-text-center">{post_title}</div>
<div class="fc-item-content fc-item-body-text-color fc-item-top-space">
{post_excerpt}
<a class="marker-link js-video" href="{%url%}" onclick="ctShowVideoInModal(this); return false;">{%label%}</a>
</div>
</div>
</div>
</div>
Now, add a custom javascript to trigger the modal
function ctShowVideoInModal(obj){
var link = obj.getAttribute("href");
if(! obj.classList.contains("js-video")){
window.location.href = link;
return false;
}
jQuery.magnificPopup.open({
items: {
src: link,
},
disableOn: 0,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
return false;
}
Done! From now on, after clicking ‘Read more’ – the embedded modal will appear.
Follow us for other useful tips and guidelines.
