How to add Youtube Embed Modal to Google Map - createIT

Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    How to add Youtube Embed Modal to Google Map

    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.

    World Map demo

    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> 
    Wordpress Dashboard with WP Google Map Pro configuration opened

    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.

    Comments
    0 response

    Add comment

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

    Popular news

    How to Get and Use the ChatGPT API
    • Dev Tips and Tricks

    How to Get and Use the ChatGPT API

    April 25, 2024 by createIT
    eCommerce growth – is your business ready?
    • Services
    • Trends

    eCommerce growth – is your business ready?

    April 8, 2024 by createIT
    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us