GoogleMap API-Not Dialog Window v02

by freedawirl

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<div id="list"></div>
<div id="dialog" title="Dialog Title Goes Here" style="display:none;">
    <p>Content of the dialog</p>
</div>

    </div>
    <div id="tabs-template" class="tabs" style="display:none">
        <ul>
            <li><a href="#test1">Test1</a>
            </li>
            
        </ul>
        <div id="test1">
            <p>You are at point #<span class="index">x</span>
            </p>
        </div>
        <div id="test2">
            <p>This is some <a href="#" class="dialog">dialog link</a>.</p>
        </div>
        <div id="test3">
            <p>There is more content that goes here.</p>
        </div>
    </div>

CSS

body {
    font-size:16px;
}
#map {
    float:left;
    width:100%;
    height:500px;
    margin-top:10px;
}
#message, #list {
    position:absolute;
}
#list li {
    list-style:none;
    padding:3px;
    margin-bottom:2px;
}
#list li:hover {
    cursor:pointer;
    cursor:hand;
}
#controls {
    position: relative;
}
.accordion, .tabs {
    font-size:12px!important;
    width:220px;
}
.ui-dialog, .ui-slider {
    font-size:12px!important;
}
.icon {
    float:left;
    position:absolute;
    cursor:pointer;
    cursor:hand;
    padding:3px;
}

JavaScript

$(function () {

    var austinTX = new google.maps.LatLng(30.4, -97.75);
    // Creating a map
    var map = new google.maps.Map($('#map')[0], {
        zoom: 11,
        center: austinTX,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
//-----------------------Array of Store Lacations
 var storeArray = new Array(
    ["30.586513", "-97.855344", "Marker0"], ["30.480655", "-97.787286", "Marker1"], ["30.452932", "-97.987008", "Marker2"], ["30.492887", " -97.923389", "Marker3"], ["30.399688", "-97.749717", "Marker4"], ["30.440332", "-97.701174", "Marker5"], ["30.426817", "-97.757476", "Marker6"], ["30.418366", "-97.668595", "Marker7"], ["30.350983", "-97.711896", "Marker8"], ["30.314233", "-97.732667", "Marker9"]  ,["30.234311", "-97.863275", "Marker10"], ["30.339708", "-97.559107", "Marker11"]
 );
    
    var markerChange = google.maps.event.addListener(map, "bounds_changed", function () {
        
        var bounds = map.getBounds();

        var markers = [];
        for (i = 0; i < storeArray.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
                map: map
            });

            
            //Gets Markers
            markers[i] = marker;
        }
        
        google.maps.event.removeListener(markerChange);
        
        
//----------------------Location Sidebar Cntrols
        $(markers).each(function (i, marker) {
            $("<li />").addClass('ui-state-default ui-corner-all')
                .html("Purchase Point " + i)
                .click(function () {
                message.open(marker, i);
            })
                .appendTo("#list");

            google.maps.event.addListener(marker, "click", function () {
                message.open(this, i);
            });
        });
    });

    var list = $("#list").css({
        top: '10px',
        right: '10px'
   ...