Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (78 sloc) 2.93 KB
<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 = $('#mapWidth').width();
console.log('resize map' + mapParentWidth);
$('#map').width(mapParentWidth);
$('#map').height(3 * mapParentWidth / 4);
google.maps.event.trigger($('#map'), 'resize');
map.fitBounds(mapBounds);
}
// Create a terrain style map
var myOptions = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
draggable: true,
scrollwheel: false,
zoomControl: true,
streetViewControl: false,
mapTypeControl: false,
panControl: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var mapBounds = new google.maps.LatLngBounds();
// for overlays now do this:
// http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
// consider ajax load of info windows using this:
// http://stackoverflow.com/questions/3381700/google-maps-v3-loading-infowindow-content-via-ajax
$.ajax({
url: '<%= locations_json_url %>',
error: function() { console.log("error "); },
success: function(results) {
console.log('retrieved map info');
for (var i = 0; i < results.length; i++) {
var location = results[i];
if (location.latitude != 0 && location.longitude != 0) {
locationMarker = new google.maps.LatLng(location.latitude, location.longitude);
mapBounds.extend(locationMarker);
var contentString = '<div><a href="/locations/' + location.id + '">' + location.name + '</a></div>' +
'<div>' + location.notes + '</div>';
var the_infowindow = new google.maps.InfoWindow({
content: contentString
});
function buildHandler(map, infowindow, marker) {
return function() {
infowindow.open(map, marker);
};
};
var the_marker = new google.maps.Marker({
position: locationMarker,
map: map,
title: location.name
});
google.maps.event.addListener(the_marker, 'click', buildHandler(map, the_infowindow, the_marker));
}
}
resizeBootstrapMap();
}
});
// resize the map on startup
resizeBootstrapMap();
// resize the map whenever the window resizes
$(window).resize(resizeBootstrapMap);
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
console.log('WOOOOO');
resizeBootstrapMap();
});
})
-->
</script>
<% if (@map_module_title != nil && @map_module_title != "") then %>
<h4><%= @map_module_title %></h4>
<% else %>
<h4>Map</h4>
<% end %>
<div id="map" style="background-color: lightgray"></div>
Something went wrong with that request. Please try again.