Quay street

Google map with photo

by chrisloughnane

HTML

<!DOCTYPE html>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id='title-bar'>Quay Street Recall</div>
<div id='map-canvas'></div>
<div id='footer-bar'><div id='footer-content'>chris</div></div>
<div class='images'>
    <img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg" />
    <img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg" />
</div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; overflow:hidden; font-family: verdana; background-color: burlywood;}
#map-canvas { height: 80% }
#title-bar { height: 10% }
#footer-bar { height: 10% }

.images {
    position: absolute;
    top: 20%;
    left: 60%;
    max-width: 354px;
    margin: 0 auto;
    cursor: pointer;
    display: none;
}
.images img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 354px;
}

#title-bar {
    font-size: 22px;
}
#footer-bar {
    font-size: 12px;
}
#footer-content { 
    position: absolute; 
    bottom: 0; 
    left: 0;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
}

#footer-content:hover {
    opacity: 1;
}

JavaScript

$(function() {
        
    function renderMap(){
        
        var myLatlng = new google.maps.LatLng(53.3,-8.216901);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        var iconBase = 'http://quaystreet.chrisloughnane.net/images/';
        
        var markerPos = new google.maps.LatLng(53.270531,-9.054631);
    
        var marker = new google.maps.Marker({
           position: markerPos,
           map: map,
           title: "Quay Street Recal",
           icon: iconBase + 'camera_small.png'
        });
        
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(19);
            map.setCenter(marker.getPosition());
            $('.images').delay(500).fadeIn('3000');
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            /*marker.setIcon(iconBase + 'camera-medium.png');*/
        });
        
        google.maps.event.addListener(map, 'zoom_changed', function() { 
        zoom = map.getZoom(); 
            if(zoom<15) { 
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
            } else {
                map.setMapTypeId(google.maps.MapTypeId.HYBRID); 
            }
        });
    }
    
    renderMap(); 
    
    $('#button-back, #chris').click(function() {
		if ($(':animated').length) {
			return false;
		}
		$('body').fadeOut(200,function(){
				window.location.href = "http://portfolio.chrisloughnane.net";
		});		
	});

    $('.images').on('mouseenter', function(){
        $('.images .new').stop(true,true).fadeOut(1000);
    }).on('mouseleave', function(){
        $('.images .new').stop(true,true).fadeIn(1000);
    });
    
    $(document).mouseup(function (e)
    {
        var container = $('.images');
    
        if (container.has(e.target).length === 0)
        {
           ...