GoogleMap API3

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>
<ul id="accordion-template" class="accordion" style="display:none;">
    <div>
         <h3><a href="#">First</a></h3> 
        <div>Point <span class="index">x</span>.</div>
    </div>
    <div>
         <h3><a href="#">Second</a></h3> 
        <div>Test content <a href="#" class="dialog">dialog link</a>.</div>
    </div>
    <div>
         <h3><a href="#">Third</a></h3> 
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    </div>
    <div id="tabs-template" class="tabs" style="display:none">
        <ul>
            <li><a href="#test1">Test1</a>
            </li>
            <li><a href="#test2">Test2</a>
            </li>
            <li><a href="#test3">Test3</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: 8,
        center: austinTX,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    
    var boundsChange = google.maps.event.addListener(map, "bounds_changed", function () {
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        var markers = [];
        for (var i = 0; i < 10; i++) {
            var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            
            
            
            markers[i] = marker;
        }
        google.maps.event.removeListener(boundsChange);
//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'
    }).appendTo(document.body);
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(list[0]);

    function MessageWindow() {
        this.setMap(map);
    }
    MessageWindow.prototype = new google.maps.OverlayView();
    MessageWindow.prototype.onAdd = function () {
        this.$div_ = $('<div id="message"...