Skip to content

Instantly share code, notes, and snippets.

@johanbrook
Created January 10, 2012 22:08
Show Gist options
  • Save johanbrook/1591488 to your computer and use it in GitHub Desktop.
Save johanbrook/1591488 to your computer and use it in GitHub Desktop.
<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>
// 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{
$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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment