PDX map module

by mlhDevelopment

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="mapcontainer">
    <div id='mymap' class="map"></div>
    <div class="bar header"></div>
    <div class="bar destination"></div>
    <div class="bar tweet"></div>
    <div class="header">What's your destination?</div>
    <div class="destination"></div>    
    <div class="tweet">tweet it to @ebrickman</div>    
</div>

CSS

#mapcontainer { 
    color: white; 
    font-family: Verdana; 
    position: relative; 
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 225px;
    width: 320px;
}
#mapcontainer > * { position: absolute; z-index: 5; padding-left: 5px; }
#mapcontainer #mymap {
    margin: 0;
    padding: 0;
    z-index: 0;
    width: 320px;
    height: 250px;
}
#mapcontainer .bar {
    background-color: silver;
    opacity: 0.6;
}

#mapcontainer .header { 
    top: 0;
    left: 0;
    width: 293px;
    height: 22px;
}
#mapcontainer .destination  {
    height: 22px;
    width: 226px;    
    top: 102px; /* (225 - 22) / 2 */
    /*left: 165px;
    padding-left: 64px;*/
    left: 196px;
    padding-left: 0;
    text-align: center;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
#mapcontainer .tweet { 
    bottom: 0; 
    left: 0;
    width: 293px;
    height: 22px;
}

JavaScript

var map;
var poi = [ 
    { name: 'Florida', zoom: 17, lat: 30.122765, lng: -85.733947 },
    { name: 'Taj Mahal', zoom: 17, lat: 27.174766, lng: 78.042099 },
    { name: 'Europe', zoom: 16, lat: 46.051463, lng: 14.506088 },
    { name: 'Tristan da Cunha', zoom: 11, lat: -37.110229, lng: -12.286549 },
    { name: 'China', zoom: 14, lat: 39.916089, lng: 116.390741 },
    { name: 'Pyramids', zoom: 15, lat: 29.975587, lng: 31.131045 },
    { name: 'Castles', zoom: 18, lat: 59.325268, lng: 18.070696 }
];
var ix = Math.floor(Math.random() * poi.length);
var mapOptions = {
    zoom: poi[ix].zoom,
    center: new google.maps.LatLng(poi[ix].lat, poi[ix].lng),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    disableDefaultUI: true
};
//map = new google.maps.Map($("#map_canvas .map")[0], mapOptions);
map = new google.maps.Map($("#mymap")[0], mapOptions);
map.setTilt(45); // it tilts if it can
$(".destination").text(poi[ix].name);