Google Maps with jQuery UI Accordion WORKING

by Michael Yingling

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="accordion">
<h3 id='1' class='dead_row ui-state-disabled'>
                    <span style='margin: 0; padding: 0; display: inline-block; width: 25%;'><span class='ignition ignition-unknown'><i class='fa fa-2x fa-question-circle'></i></span></span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 50%;'>175<br/>No GPS Data</span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 25%;'><div style='background-color: grey;'></div></span>
                </h3><div><div class='map' data-lat='0' data-long='0' data-when='Never'></div></div><h3 id='2' class='dead_row ui-state-disabled'>
                    <span style='margin: 0; padding: 0; display: inline-block; width: 25%;'><span class='ignition ignition-unknown'><i class='fa fa-2x fa-question-circle'></i></span></span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 50%;'>280<br/>No GPS Data</span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 25%;'><div style='background-color: grey;'></div></span>
                </h3><div><div class='map' data-lat='0' data-long='0' data-when='Never'></div></div><h3 id='3' class='dead_row ui-state-disabled'>
                    <span style='margin: 0; padding: 0; display: inline-block; width: 25%;'><span class='ignition ignition-unknown'><i class='fa fa-2x fa-question-circle'></i></span></span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 50%;'>506<br/>No GPS Data</span><span
                    style='margin: 0; padding: 0; display: inline-block; width: 25%;'><div style='background-color: grey;'></div></span>
                </h3><div><div class='map' data-lat='0' data-long='0' data-when='Never'></div></div>  <h3 id='4'...

CSS

.track_row, .dead_row {
        height: 50px;
        background-color: #cccccc;
        border-bottom: solid 2px #F0F0F0;
        font-size: 20pt;
    }
    .track_row {
        cursor: pointer;
    }
    .track_row span, .dead_row span {
        text-align: center;
        vertical-align: middle;
    }
    .map {
        height: 100%;
        min-height: 200px !important;
    }
    .ui-state-default {
        background: none !important;
    }
    .ui-corner-all,
    .ui-corner-top {
        border-radius: 0 !important;
    }
    .ui-accordion .ui-accordion-content {
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .ui-icon {
        display: none !important;
    }
    .ui-state-disabled {
        opacity: 1 !important;
    }

JavaScript

var maps = [];
        jQuery("#accordion").accordion({
            active: false,
            collapsible: true,
            change: function(event, ui) {
                for (var i = 0; i < maps.length; i++) {
                    google.maps.event.trigger(maps[i], 'resize');
                    maps[i].setCenter(maps[i]._center);
                }
            }
        }).find('.map').each(function(i, o) {
            var latLong = new google.maps.LatLng(
                jQuery(this).data("lat"), jQuery(this).data("long"));

            var map = new google.maps.Map(o, {
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROAD,
                center: latLong
            });
            maps.push(map);

            var marker = new google.maps.Marker({
                position: latLong,
                map: map,
                title: jQuery(this).data('when')
            });
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latLong);
            map._center = latLong;
            jQuery(o).data('map', map);
        });