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

    JS react developer – 20 questions for a job interview
    • Technology
    • Trends

    JS react developer – 20 questions for a job interview

    May 24, 2023 by createIT
    PHPStorm – how to replace HTML tags using regex?
    • Dev Tips and Tricks

    PHPStorm – how to replace HTML tags using regex?

    May 18, 2023 by createIT
    Ultimate GDPR – get user consent logs
    • Dev Tips and Tricks

    Ultimate GDPR – get user consent logs

    May 5, 2023 by createIT
    Backend Developer – how to become one?
    • Technology
    • Trends

    Backend Developer – how to become one?

    May 5, 2023 by createIT
    SEO Checklist for website migration
    • Services

    SEO Checklist for website migration

    April 4, 2023 by createIT
    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    Write content that sells
    • Trends

    Write content that sells

    March 21, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 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