JSFiddle - React, Tailwind, and code Playground

by Ilmv

HTML

<div id="details">
    <h1>Locations</h1>
    <ul id="locations">
        <li id="location-reigate">
            <a class="map" title="View the map of Reigate on Google Maps" href="http://maps.google.co.uk/maps/ms?gl=uk&ie=UTF8&msa=0&msid=100756962815478147188.000493108869a249687e5&ll=51.237336,-0.202689&spn=0.018808,0.036478&z=14&source=embed">
                <img src="images/map-reigate.gif" height="270" width="440" alt="A map of Reigate"/>
            </a>
        </li>
        <li id="location-redhill">
            <a class="map" title="View the map of Redhill on Google Maps" href="http://maps.google.co.uk/maps?client=safari&amp;q=redhill&amp;oe=UTF-8&amp;ie=UTF8&amp;hq=&amp;hnear=Redhill,+United+Kingdom&amp;gl=uk&amp;ei=YDa_TOWMIoKQjAelqKWbAg&amp;ved=0CB0Q8gEwAA&amp;z=12&amp;ll=51.240796,-0.170087&amp;source=embed">
                <img src="images/map-redhill.gif" height="270" width="440" alt="A map of Redhill"/>
            </a>
        </li>
        <li id="location-banstead">
            <a class="map" title="View the map of Banstead on Google Maps" href="http://maps.google.co.uk/maps?client=safari&amp;q=horley&amp;oe=UTF-8&amp;ie=UTF8&amp;hq=&amp;hnear=Horley,+United+Kingdom&amp;gl=uk&amp;ei=Tze_TNF_lrqMB-ONvK4C&amp;ved=0CB0Q8gEwAA&amp;ll=51.174272,-0.159169&amp;spn=0.007735,0.022681&amp;z=14&amp;source=embed">
                <img src="images/map-banstead.gif" height="270" width="440" alt="A map of Reigate"/>
            </a>
        </li>
    </ul>

JavaScript

// Change the Google Maps link images into embedded maps with a width of 470px
// code originally by Laura Kalbag

function googleMaps() {
    $('#locations li').each(function() {
        var map = $(this).find('a.map');

        map.attr('src', map.attr("href")) // Inserts the link attribute in the embed attribute
        .removeAttr("href") // Removes href attribute
        .find('img').remove(); // Remove all map images
        var src = map.attr("src");
        var title = map.attr("title");

        map.replaceWith('<iframe></iframe>');

        var iframe = $(this).find('iframe');
        iframe.attr('class', 'map') // Gives the iframe a class of 'map'
        .attr('src', src) // Gives the iframe the embed code of the previous link
        .attr('title', title) // Gives the iframe the title of the previous link
        .attr('width', '460') // Makes the iframe 460px wide
        .attr('height', '270') // Makes the iframe 270px tall
        .attr('frameborder', '0') // No frameborder on the iframe
        .attr('scrolling', 'no') // No scrolling on the iframe
        .attr('marginheight', '0') // No margin height on the iframe
        .attr('marginwidth', '0') // No margin width on the iframe
        .attr('src', iframe.attr('src').replace('source=embed', 'output=embed'));

        // above is a great example of method chaining with jQuery, where we don't
        // have to keep reusing our selector
    });
}

$(document).ready(function() {

    // set up a window resize selector
    $(window).resize(function() {
        // only fire our function if the res < 470px
        if ($(window).width() < 470) {
            googleMaps();
            $('#details h1').html('Locations'); // just for demo
        } else {
            $('#details h1').html('Locations... screen is now wider than 470px'); // just for demo
        }
    });

    // trigger the resize for the first time
    $(window).trigger('resize');

    // you'll probably need a function to revert it...