gistfile1.phtml

<section id="map-modal" class="modal modal-large hidden fade">
	<header>
		<a href="#" title="Close this box" class="close">×</a>
	</header>
	
	<div id="map-large" class="project-map" style="width: 100%; height: 27em;"></div>
</section>

JS.js

// Page init code is at the bottom

var Map = (function(map, $){
	var exports = map || {};
	
	var geo = new google.maps.Geocoder(),
		geocode = {
			address: [	config.project_location.street,
						config.project_location.city,
						config.project_location.country].join(", ")
		},
		mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			zoom: (session.location && session.location.address.country == "Sweden") ? 7 : 3,
			disableDefaultUI: true
		};


	function setCenter(map, data){
		
		geo.geocode(data, function(results, status){

			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				
				var string = results[0].formatted_address.split(","),
				address = {
					street: string[0],
					city: string[1],
					country: string[2]
				},

				marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});

				// Try to force re-rendering, but alas to no avail:
				google.maps.event.trigger(map, 'resize');
				google.maps.event.trigger(map, 'bounds_changed');
				map.setZoom( map.getZoom() );
				map.setCenter(marker.getPosition());

				maps.push({map: map, marker: marker});
                                fillTemplate(address);

			} else {
				console.warn("Geocode was not successful for the following reason: " + status);
			}
		});
		
	}


	function fillTemplate(options){
		var template = "<li>{street}</li>\n<li>{city}</li>\n<li>{country}</li>",
			string = util.t(template, options); // Util.t is a simple templating method

			$("#project-location").html(string);
	}
	
	
	// Initialization
	
	exports.init = function(options){
		if(!options || options === "undefined") return false;
		
		$.each(options, function(i, element) {
			// Choose the DOM element - not the jQuery object:
			element = (element instanceof jQuery) ? element.get(0) : element;
			
			var map = new google.maps.Map(element, mapOptions);
			setCenter(map, geocode);
		});
		
	};

	exports.getMaps = function(){
		return maps;
	};

	return exports;

})(Map, jQuery);


// Page init

$(function(){
	// Using Twitter's Bootstrap modal:

	$("#map-modal").modal({
		backdrop: true,
		keyboard: true
	});
	
	// Init maps:

	Map.init({
		normal: $("#map"),
		large: $("#map-large")
	});

        $("#map-modal").bind("show", resize);
	
	function resize(){
		$.each(Map.getMaps(), function(i, item){
			google.maps.event.trigger(item.map, 'resize');
			google.maps.event.trigger(item.map, 'bounds_changed');
			item.map.setZoom(item.map.getZoom() );
			item.map.setCenter(item.marker.getPosition());
		});
	}

});

modal.scss

.modal{
	$width: make_fluid(get_columns(7));
	position: fixed;
	width: $width;
	top: 15%;
	left: 50%;
	margin-left: -#{get_columns(7) / 2};
	z-index: 1000;
	
	background-color: #fff;
	
	@include box-sizing("border-box");
	@include border-radius(.3em);
	@include box-shadow(rgba(#000, 0.4) 0 3px 9px);
	
	&.modal-large {
		width: make_fluid(get_columns(9));
		margin-left: -#{get_columns(9) / 2};
	}
	
	header {
		padding: 1% 2%;
		border-bottom: 1px solid #ddd;
		@include background(#fff linear-gradient(#fff, #f7f7f7));
		
		h1, h2, h3 {
			margin-bottom: 0;
		}
	}
	
	.close {
		position: absolute;
		text-decoration: none !important;
		@include rem(20);
		color: #888;
		top: 2%;
		right: 1%;
		
		&:hover{
			color: $bodycolor;
		}
	}
	
	&.fade {
		@include transition(top .3s ease-out);
		top: 0;
	}
	&.fade.in {
		top: 15%;
	}
}


.modal-backdrop {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	
	&.fade.in {
		@include opacity(0.8);
	}
}