app/views/map/new.html.erb
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
#map {
width: 100%;
height: 700px;
}
#iw-container {
margin-bottom: 5px;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 10px;
font-weight: 400;
margin-right: 1px;
padding: 10px 5px 10px 5px;
max-height: 140px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<div class="page-header">
<h2 ALIGN="CENTER" style="color:#fff;" face="Garamond"> List of Alumni </h2>
</div>
<div class="table-responsive">
<table id="table" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">First Name</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">Last Name</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">Major at Cal</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">I will be in</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">Grad School or Company</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">Email</th>
<th bgcolor="#5D7B9D"><font color="#fff" face="Raleway">Cool thing about me!</th>
</tr>
</thead>
<tbody>
<%= content_tag_for(:tr, @users) do |user| %>
<td class="first_name" bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.first_name %></td>
<td class="last_name" bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.last_name %></td>
<td class="major" bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.major %></td>
<td bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.location %></td>
<td bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.school %></td>
<td bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.email %></td>
<td class="description" bgcolor="#B38B00"><font color="#004AA8" face="Source Sans"><%= user.description %></td>
<td class="lat" style="display:none;"> <%= user.lat %></td>
<td class="lon" style="display:none;"> <%= user.lon %></td>
<% end %>
</tbody>
</table>
</div>
<div id="map"></div>
<!-- adding markerclusterer -->
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script>
function initMap() {
var styles = [
{
"featureType": "water",
"stylers": [
{
"color": "#19a0d8"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"weight": 6
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#e85113"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#efe9e4"
},
{
"lightness": -40
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#efe9e4"
},
{
"lightness": -20
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": 100
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"lightness": -100
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.icon"
},
{
"featureType": "landscape",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"stylers": [
{
"lightness": 20
},
{
"color": "#efe9e4"
}
]
},
{
"featureType": "landscape.man_made",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": 100
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"lightness": -100
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"hue": "#11ff00"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": 100
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"hue": "#4cff00"
},
{
"saturation": 58
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#f0e4d3"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#efe9e4"
},
{
"lightness": -25
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#efe9e4"
},
{
"lightness": -10
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
}
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled_Map"});
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(39.8282, -98.5795), // centered to the the middle of US
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// setting the zoom back to the center of the map if single clicked.
// map.addListener('click', function() {
// map.setZoom(5);
// map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
// });
// display the content from table to the map
var first_name = Array.from(document.getElementsByClassName("first_name"));
var last_name = Array.from(document.getElementsByClassName("last_name"));
var description = Array.from(document.getElementsByClassName("description"));
var major = Array.from(document.getElementsByClassName("major"));
var lat = Array.from(document.getElementsByClassName("lat"));
var lon = Array.from(document.getElementsByClassName("lon"));
var markers=[];
for (var i=0; i<last_name.length;i++){
var contentString = '<div id="iw-container">' + '<div class="iw-title">' + first_name[i].innerHTML+ " "+ last_name[i].innerHTML + '</div>' + '<div class="iw-content">' + major[i].innerHTML + '<br />' + description[i].innerHTML + '<br />' + '</div></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i].innerHTML, lon[i].innerHTML),
map: map, title: "pin_"+first_name[i].innerHTML+"_"+last_name[i].innerHTML,
animation: google.maps.Animation.DROP,
});
marker.infoWindow = infowindow;
// using this would set the content for the current marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(12);
map.setCenter(this.getPosition());
// uncomment to make pins bounce
// this.setAnimation(google.maps.Animation.BOUNCE);
this.infoWindow.open(map, this);
});
markers.push(marker);
// uncomment to display info from markers when map loads
// infowindow.open(map, marker);
}// end of for loop iteration
var markerCluster = new MarkerClusterer(map, markers);
}// end of function initMap()
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>