This is a simple library agnostic example of Flickr's three step map zoom.

Three step map zoom example

/*
*  This is a simple library agnostic example of Flickr's three step map zoom. 
*  In this example we are using the open mapquest static map api. Preloading 
*  of second and third map images can be done before mouseover to make their 
*  first display smoother.
*/

<style>
	#map_container {
		width:300px;
		height:100px;
		position:relative;
	}
	
	img.map-image {
		opacity:0;
		position:absolute;
		-webkit-transition: opacity .3s ease-in;
		-moz-transition: opacity .3s ease-in;
		-o-transition: opacity .3s ease-in;
		transition: opacity .3s ease-in;
	}
	
	img.map-image.region {
		opacity:1;
	}
</style>

<div id="map_container">
	<img class="map-image region" src="http://open.mapquestapi.com/staticmap/v3/getmap?size=300,100&zoom=6&center=37.770019,-122.511377&scalebar=false&pois=blue,37.770019,-122.511377">	
</div>

<script>

(function() {
	
	var current_step = null,
	    map_container = document.getElementById('map_container'),
	    options = {
		width        : 300,
		height       : 100,
		pin_width    : 20,
		pin_height   : 20,
		step_classes : ['region','city','street'],
		step_zoom    : [6,12,17],
		latitude     : 37.770019,
		longitude    : -122.511377
	    }
	
	function add_map_image(step) {
		var img = document.createElement('img');
		
		img.src = 'http://open.mapquestapi.com/staticmap/v3/getmap?' + 
		        'size=' + options.width + ',' + options.height + 
		        '&zoom=' + options.step_zoom[step] + 
		        '&center=' + options.latitude + ',' + options.longitude + 
		        '&scalebar=false&pois=blue,' + options.latitude + ',' + options.longitude;
		img.className = 'map-image ' + options.step_classes[step];
		
		return map_container.appendChild(img);
	}
	
	function show_step(step) {
		
		var maps = map_container.querySelectorAll('img'),
		    map  = null;
		
		for(var i=0, l=maps.length; l > i; i++) {
			maps[i].style.opacity=0;
		}
		
		map = map_container.querySelector('.' + options.step_classes[step]);
		
		if(map) {
			map.style.opacity=1;
		}
		
		current_step = step;
		
		return true;
		
	}
	
	function isOverPin(e) {
		
		var map_x = map_container.offsetLeft,
		    map_y = map_container.offsetTop,
		    pin_x = (map_x + (options.width/2)) - (options.pin_width/2),
		    pin_y = (map_y + (options.height/2)) - (options.pin_height/2);
		
		if(e.x > pin_x && e.x < (pin_x + options.pin_width) && e.x > pin_y && e.y < (pin_y + options.pin_height)) {
			return true;
		}

		return false;
		
	}
	
	map_container.addEventListener( "mousemove", function(e) {
		
		var maps        = null,
		    is_over_pin = isOverPin(e);
		
		if(current_step !== 1 && !is_over_pin) {
			
			maps = map_container.querySelectorAll('img');
			
			if(maps.length < 2) {
				add_map_image(1);
			}
			
			show_step(1);
		}
		
		if(current_step !== 2 && is_over_pin) {
			
			maps = map_container.querySelectorAll('img');
			
			if(maps.length < 3) {
				add_map_image(2);
			}
			
			show_step(2);
		} else {
			
			if(current_step === 2 && !is_over_pin) {
				show_step(1);
			}
			
		}
		
	}, false );
	
	map_container.addEventListener( "mouseout", function(e) {
		
		show_step(0);
		
	}, false );
	
})();

</script>