Kuala Lampur - GeoMaps Lab (nf) - Shadow Box

From the Kuala Lampur GeoMaps Labs. Currently NF but the outstanding shadowed overlay is intact

by Reusablecode

HTML

<div id="main"> 
    <h1>Lab 1: Map Foundation</h1> 
    <div id="map-canvas"></div> 
</div>

CSS

body {
    font-family: arial;
}
h1 {
    text-shadow: #99b 3px 3px 4px;
    margin-top: 0;
}


#main {
    margin: 0 auto;
    text-align: center;
}


#map-canvas {
    margin: 0 auto;
    width: 750px;
    height: 500px;
    -webkit-box-shadow: rgba(0,0,0,0.7) 10px 10px 40px;
    -moz-box-shadow: rgba(0,0,0,0.7) 10px 10px 40px;
    box-shadow: rgba(0,0,0,0.7) 10px 10px 40px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 6px solid #429;
}


.info-window {
    font-size: 0.9em;
    text-align: left;
}
.info-window h2 {
    color: #426;
    font-size: 1.2em;
    margin: 0 0 5px 0;
    text-align: left;
    text-shadow: #666 2px 2px 4px;
}
.info-window img {
    border: 3px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}


.timestamp {
    font-style: normal;
}
.caption {
    color: #333;
    font-size: 0.8em;
    font-style: italic;
    overflow: none;
    width: 250px;
}

JavaScript

var App = {
  / / Constants
FLICKR_API_KEY: '1632c18a388a4da173db303dc5d20755',


// Map related
map: null,
markers: {},
infoWindow: new google.maps.InfoWindow(),


// DOM pointers
mapCanvasNode: document.getElementById('map-canvas')
};


/**
 * Injects a new SCRIPT tag into HEAD to fetch JSONP resources.
 * @param {string} url
 */
App.loadScript = function(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
};


/**
 * URL escapes the specified string, for use with request parameter values.
 * @param {string} str
 */
App.escapeUrl = function(str) {
    return window.encodeURIComponent(str);
};


/**
 * Callback function to handle click events fired on each Marker.
 * @param {google.maps.Marker} marker
 * @return {function}
 */
App.handleMarkerClick = function(marker) {
    return function() {
        var photo = marker.photo_;
        var photoDate = (new Date(photo.datetaken)).toUTCString();
        photoDate = photoDate.substring(0, photoDate.lastIndexOf(' '));
        App.infoWindow.setContent([
            '<div class="
info - window ">',
            '<h2>' + photo.title + '</h2>',
            '<a target="
_blank " ',
              'href="' + App.getFlickrPhotoUrl(marker.photo_, '
b ') + '">',
            '<img src="',
            App.getFlickrPhotoUrl(marker.photo_, '
m '),
            '"/>',
            '</a>',
            '<div class="
caption ">',
            '<div class="
timestamp ">',
            '<b>Taken on:</b> ',
            photoDate,
            '</div>',
            photo.description._content,
            '</div>',
            '</div>'
            ].join(''));
        App.infoWindow.open(App.map, marker);
    };
};


/**
 * Generates the Flickr photo source URL for the specified size.
 * Reference: http://www.flickr.com/services/api/misc.urls.html
 * @param {Object} photo Photo JSON response object
 * @param...