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

    Digital marketing – transform data into insight 
    • Trends

    Digital marketing – transform data into insight 

    November 24, 2023 by createIT
    A simple JavaScript typewriter effect tutorial
    • Dev Tips and Tricks

    A simple JavaScript typewriter effect tutorial

    November 22, 2023 by createIT
    WP-HistographAI: reviving history with AI on WordPress
    • Dev Tips and Tricks

    WP-HistographAI: reviving history with AI on WordPress

    November 21, 2023 by createIT
    Update Excel files on OneDrive with Node.js, MS Graph
    • Dev Tips and Tricks

    Update Excel files on OneDrive with Node.js, MS Graph

    November 20, 2023 by createIT
    Popup Visits Plugin: engage your visitors on their X visit!
    • Dev Tips and Tricks
    • Technology

    Popup Visits Plugin: engage your visitors on their X visit!

    November 17, 2023 by createIT
    The most popular eCommerce technologies among top players
    • Technology
    • Trends

    The most popular eCommerce technologies among top players

    October 26, 2023 by createIT
    BaseLinker: the tool, challenges and BaseLinker alternatives
    • Technology
    • Trends

    BaseLinker: the tool, challenges and BaseLinker alternatives

    October 25, 2023 by createIT
    The power of popups: why every WordPress site needs one
    • Technology
    • Trends

    The power of popups: why every WordPress site needs one

    October 24, 2023 by createIT
    AI pet Personality Quiz: revealing your pet’s unique traits
    • Dev Tips and Tricks
    • Technology

    AI pet Personality Quiz: revealing your pet’s unique traits

    October 23, 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