resize google map within bootstrap framework

add a designated #mapContainer to each page; write an event handler that resizes the google map (1) at startup, (2) when the window resizes
wfwalker · Oct 31, 2012 · 6279469 · 6279469
1 parent 82098a4
commit 6279469
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 14 deletions.
diff --git a/app/views/counties/show.html.erb b/app/views/counties/show.html.erb
@@ -54,7 +54,7 @@
 		<% end %>   
 	</div>
 
-	<div class='span6'>
+	<div class='span6' id='mapContainer'>
 		<% if (@county.locations.with_lat_long.size > 0) %>
 			<% @map_module_title = 'County Map' %>                       
 			<%= render :partial => 'locations/google', :object => @county.locations.with_lat_long, :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/counties/locations/%s.json' % @county.id }  %>

diff --git a/app/views/families/show.html.erb b/app/views/families/show.html.erb
@@ -37,7 +37,7 @@
 		<%= render :partial => 'species/undivided_list', :object => @family.species_seen, :locals => { :show_headings => true } %>
    	</div>
 
-   	<div class='span6'>
+   	<div class='span6' id='mapContainer'>
 		<% if (Location.with_lat_long(@family.locations).length > 0) %>
 			<% @map_module_title = 'Family Map' %>                       
 			<%= render :partial => 'locations/google', :object => Location.with_lat_long(@family.locations), :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/families/locations/%s.json' % @family.id }  %>

diff --git a/app/views/locations/_google.html.erb b/app/views/locations/_google.html.erb
@@ -1,12 +1,21 @@
 <% locations = google %>
 
-<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"  type="text/javascript"></script>
+<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false" type="text/javascript"></script>
 
 <script type="text/javascript">
 <!--
 		// this is called when the page loads. 
 		// it initializes the map, and creates each marker
 		$(document).ready(function(){   
+
+			function resizeBootstrapMap() {
+			  var mapParentWidth = $('#mapContainer').width();
+			  $('#map').width(mapParentWidth);
+			  $('#map').height(3 * mapParentWidth / 4);
+			  google.maps.event.trigger($('#map'), 'resize');
+			  console.log(mapParentWidth);
+			}
+
 	  		// Create a terrain style map
 	  	    var myOptions = {
 		      mapTypeId: google.maps.MapTypeId.TERRAIN
@@ -60,6 +69,12 @@
 				    map.fitBounds(newBounds);
 				}
 			});
+
+			// resize the map on startup
+		    resizeBootstrapMap();
+
+		    // resize the map whenever the window resizes
+			$(window).resize(resizeBootstrapMap);
       })    
 -->
 </script>                   
@@ -73,6 +88,6 @@
 		<% end %>
 	</div>
 	<div class="pagecontentitem">
-		<div id="map" style="width: <%= map_width %>px; height: <%= map_height %>px; background-color: lightgray"></div>
+		<div id="map" style="width: 400px; height: 300px; background-color: lightgray"></div>
 	</div>
 </div>
diff --git a/app/views/locations/index.html.erb b/app/views/locations/index.html.erb
@@ -2,7 +2,11 @@
 	Birding Map
 </div>
 
-<%= render :partial => 'locations/google', :object => Location.with_lat_long(@locations), :locals => { :map_width => 930, :map_height => 480, :locations_json_url => '/locations.json' } %>
+<div class='row'>
+	<div class='span12' id='mapContainer'>
+		<%= render :partial => 'locations/google', :object => Location.with_lat_long(@locations), :locals => { :map_width => 930, :map_height => 480, :locations_json_url => '/locations.json' } %>
+	</div>
+</div>
 
 <% location_lists = @locations/(@locations.size / 3 + 3)%>
 

diff --git a/app/views/locations/photo_to_do_list.html.erb b/app/views/locations/photo_to_do_list.html.erb
@@ -1,10 +1,14 @@
-<div id="pagetitle">
+<div class="lead">
 	<%= @page_title %>
 </div>		
 
 <% species_lists = @species_seen_not_photographed_nearby/(@species_seen_not_photographed_nearby.size / 3 + 3)%>
 
-<%= render :partial => 'locations/google', :object => [ @location ], :locals => { :map_width => 780, :map_height => 480, :locations_json_url => '/locations/%s.json' % @location.id  } %>
+<div class='row'>
+	<div class='span12' id='mapContainer'>
+		<%= render :partial => 'locations/google', :object => [ @location ], :locals => { :map_width => 780, :map_height => 480, :locations_json_url => '/locations/%s.json' % @location.id  } %>
+	</div>
+</div>
 
 <div class="pagecontentmodule">
 	<div class="moduletitle">Recent nearby sightings from eBird</div>	

diff --git a/app/views/locations/show.html.erb b/app/views/locations/show.html.erb
@@ -32,7 +32,7 @@
 		</div>                               
 	</div>
 
-	<div class='span6'>
+	<div class='span6' id='mapContainer'>
 		<% if (@location.latitude != 0) %>
 			<% @center_latitude = @location.latitude %>
 			<% @center_longitude = @location.longitude %>

diff --git a/app/views/species/show.html.erb b/app/views/species/show.html.erb
@@ -52,12 +52,10 @@
 		<% end %>
 
 	</div>
-	<div class='span6'>
-
+	<div class='span6' id='mapContainer'>
 		<% if (@species.locations.with_lat_long.size > 0) %>  
 			<%= render :partial => 'locations/google', :object => @species.locations.with_lat_long, :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/species/locations/%s.json' % @species.id }  %>
 		<% end %>
-
-		</div>
+	</div>
 
 </div>
diff --git a/app/views/states/show.html.erb b/app/views/states/show.html.erb
@@ -20,7 +20,7 @@
 			<%= show_trip_list(@state.trips, true) %>
 		<% end %>
 	</div>
-	<div class='span6'>
+	<div class='span6' id='mapContainer'>
 		<% if (@state.locations.with_lat_long.size > 0) %>
 			<% @map_module_title = 'State Map' %>                       
 			<%= render :partial => 'locations/google', :object => @state.locations.with_lat_long, :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/states/locations/%s.json' % @state.id  } %>

diff --git a/app/views/trips/show.html.erb b/app/views/trips/show.html.erb
@@ -87,7 +87,7 @@
 		<% end %>
 	</div>
 
-	<div class='span6'>
+	<div class='span6' id='mapContainer'>
 		<% has_notes?(@trip) do %>
 			<div class="pagecontentmodule">
 				<div class="moduletitle">