CreateIT
CreateIT
BLOG

How to add Youtube Embed Modal to Google Map

TAGS:

How to add Youtube Embed Modal to Google Map

SHARE

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 an infobox 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. 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 be also 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 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.

 

___

About the article Author:

Maciej Brzeziński

Techleader of createIT, working in the IT sector for over 14 years. Innovator, author, and owner of an e-shop that he has been continuously developing for over 10 years. Currently, with his team of over 20 developers, he supervises all kinds of e-commerce projects of varied structure, characteristics, and size: from simple on-line shops for retail clients to advanced B2B platforms with support of multiple shopping carts, multiple languages, and integration with external systems. His work also involves modifying and expanding the existing platforms with millions of products in their databases, platforms that support variable pricing (several variants of the same product), dropshipping modules, integration with storage systems, integration with courier delivery services, and the last but not least, the optimization of scripts. By participating in a multitude of projects, he had the opportunity to “test out” all kinds of platforms (open-source, SaaS – Cloud-Hosted eCommerce Platforms) and dedicated platforms.

About us:

Hi, we are createIT!

As a passionate group of professionals with a love for Web and mobile technologies, we have been successfully serving our clients for the past 15 years. Through these years we have continuously striven to create the best IT solutions our clients seek.

Our 70+ developer team creates cutting-edge complex B2B and B2C web systems and apps as well as delivers top-notch direct outsourcing services.

We work in multiple frameworks but we hold special feelings and are experts in PHP (Symfony, OXID, WordPress), JavaScript (React, AngularJS), Flutter and Blockchain. We do enjoy working in the scalable cloud environment like AWS.

We are located in Warsaw, Poland, in the heart of Europe. Concentrated on delivering durable web solutions of high integrity, we do not always try to be the cheapest. However, thanks to our location you will be surprised how reasonable our prices are.

Fluent in English we offer services worldwide. Among others, in countries such as the U.S.A., Great Britain, Germany, Australia, Sweden and Poland.

Popular News

Need help?

  • Looking for support from experienced programmers?

  • Need to fix a bug in the code?

  • Want to customize your webste/application?

ADD COMMENT

Your email address will not be published. Required fields are marked *

createIT Contact