My Custom Sidebar



Code to generate this page: 
//a simple array of data
$data_array = array(
    array(
        "address"=>"Denver,CO",
        "title"=>"Denver Marker Title",
        "desc"=>"Denver Marker Description"
    ),
    array(
        "address"=>"Littleton,CO",
        "title"=>"Littleton Marker Title",
        "desc"=>"Littleton Marker Description"
    ),
    array(
        "address"=>"Boulder,CO",
        "title"=>"Boulder Marker Title",
        "desc"=>"Boulder Marker Description"
    ),
);

$MAP_OBJECT = new GoogleMapAPI();
$MAP_OBJECT->_minify_js = isset($_REQUEST["min"])?FALSE:TRUE;
$MAP_OBJECT->setDSN("mysql://user:[email protected]/db_name");
$MAP_OBJECT->disableSidebar();

$SIDEBAR_HTML = "";

//add markers to map and create sidebar html.
foreach($data_array as $location){
    //add the marker to the map.
    $marker_id = $MAP_OBJECT->addMarkerByAddress($location["address"],$location["title"], $location["desc"]);

    //create an id to be used for the marker opener <a>
    $opener_id = "opener_".$marker_id;

    //append <li> item to sidebar html
    $SIDEBAR_HTML .= "
        <li id='$opener_id'>
            <a href='#'>".$location["title"]."</a>
            <p>
                ".$location["desc"]."
            </p>
        </li>
    ";

    //add marker opener id to map object
    $MAP_OBJECT->addMarkerOpener($marker_id, $opener_id);
}
?>
<html>
<head>
<?=$MAP_OBJECT->getHeaderJS();?>
<?=$MAP_OBJECT->getMapJS();?>
<style type="text/css">
    .sidebar, #map{
        float:left;
    }
    .sidebar{
        width:160px;
        border:1px #000 solid;
        margin-left:5px;
    }
    h3{
        margin:0px;
        padding:5px;
        background-color:#F00;
        color:#fff;
    }
    ul, li{
        list-style:none;
        margin:0px;
        padding:0px;
    }
    li{
        border-bottom:1px #000 solid;
        display:block;
    }
    li a{
        display:block;
        padding:5px;
        background-color:#CCC;
    }
    li a:hover{
        background-color:#999;
    }

    li p{
        padding:5px;
    }
</style>
</head>
<body>
<?=$MAP_OBJECT->printOnLoad();?>
<?=$MAP_OBJECT->printMap();?>
<div class='sidebar'>
    <h3>My Custom Sidebar</h3>
    <ul>
        <?=$SIDEBAR_HTML;?>
    </ul>
</div>