JSFiddle - React, Tailwind, and code Playground

by Richard Ayotte

HTML

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAupmLgSmneuFx6qmPdceo-ZcOZP5cKa2A&amp;sensor=false&amp;n0fecx"></script>
<script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<div class="tms-map" id="store-locator-map" style='width:50%;height:600px;float:right;'>Where's my map!</div>
<div tabindex="0" class="results">
    <div class="resultcount"></div>
    <div tabindex="0" data-lon="-79.244302700000" data-lat="43.177723300000" class="location tms-marker tms-marker1">
        <div class="location-wrapper">
            <div class="Zehrs show-infobox storetype"> <strong>The Mobile Shop</strong> at
                <br>
                <img alt="" src="http://mobileshop.cgi-digital.com/sites/mobileshop/modules/custom/tms_locator/stores/store_zehrs.png">
            </div>
             <h4><a href="#">Zehrs Geneva Street</a></h4>

            <p class="address">Fairview Mall 285 Geneva St.</p>
            <p class="locality">St Catharines, ON L2N 2G1</p>
            <p class="phone">(905) 934-8006</p>
            <p class="manager show-infobox">Manager: Anthony Giu</p>
            <p class="storecontact"><a href="http://mobileshop.cgi-digital.com/contact-store?storeid=792&amp;type=store">Contact The Mobile Shop at Zehrs Geneva Street</a>

            </p>
            <p class="directions show-infobox"><a href="https://www.google.com/maps/preview#!q=Fairview+Mall+285+Geneva+St.%2C+St+Catharines%2C+ON+%2C+Canada">Get Directions</a>

            </p>
            <div class="hours show-infobox">
                 <h5>The Mobile Shop Store Hours</h5>

                <p>* Holiday hours may vary</p>
                <ol class="store-hours">
                    <li><span class="day">Sunday</span><span class="start">10:00</span><span class="end">18:00</span>

                    </li>
                    <li><span class="day">Monday</span><span class="start">10:00</span><span class="end">20:00</span>

             ...

JavaScript

/*
This instantiates a new google map,
and then iterates through all the current
Listings. It creates markers from the HTML.
Some values are hidden in the sidebar display,
but are toggled on in the marker display.
*/
(function ($) {
    $().ready(function () {
        if ($('#tms-locator-filter .contents .results').length) {
            $('#tms-locator-filter .contents .results').focus();
        } else {
            $('#tms-locator-filter #edit-location').focus();
        }
        $('#store-locator-map').gmap({
            'center': '57.708356,-96.083575',
                'zoom': 4
        }).bind('init', function (ev, map) {
            $("div.location.tms-marker").each(function (i, el) {
                var lat = $(el).data('lat');
                var lon = $(el).data('lon');
                var sid = 'tms-marker' + (i + 1);
                $('#store-locator-map').gmap('addMarker', {
                    'id': sid,
                        'position': new google.maps.LatLng(lat, lon),
                        'bounds': true,
                        'icon': '/sites/mobileshop/themes/tms/images/markers/' + sid + '.png'
                }, function (map, marker) {
                    $(el).find('h4 a').click(function () {
                        var content = $.parseHTML('<div tabindex="0" class="map-location ' + marker.id + '">' + $(el).html() + '</div>')[0];
                        $('#store-locator-map').gmap('openInfoWindow', {
                            content: content
                        }, marker,

                        function (iw) {
                            var mel = iw.addListener('domready', function () {
                                google.maps.event.removeListener(mel);
                                content.focus();
                            })
                        });
                    });
                })
            });
        });
    });
})(jQuery);