All maps utilize Google Maps and the gmaps.js wrapper.
To use, insert <script src="//maps.google.com/maps/api/js?sensor=true"></script> followed by <script src="/assets/js/gmaps.min.js"></script> at the end of your footer, after jQuery.
To create a new map, you first need to add a div with an ID and the class .map. Here's an example:
<div id="map-1" class="map"></div>The GMaps class requires the container ID, latitude, and longitude.
var map_1;
map_1 = new GMaps({
div: '#map-1',
lat: 33.211655052789496,
lng: -87.53979206085205
});
<div id="map-1" class="map"></div>
var map_1;
map_1 = new GMaps({
div: '#map-1',
lat: 33.211655052789496,
lng: -87.53979206085205,
zoom: 16
});
Markers can be added either by using the addMarker or addMarkers object. The addMarker object will create a single marker on the map, while the addMarkers object accepts an array of markers to add many at once.
<div id="map-2" class="map"></div>
var map_2;
map_2 = new GMaps({
div: '#map-2',
lat: 33.211655052789496,
lng: -87.53979206085205,
zoom: 17
});
map_2.addMarkers([
{
title: 'Bryce Lawn Building',
lat: 33.21040734,
lng: -87.53796816,
infoWindow: {
content: 'Bryce Lawn Building
HTML Content
'
}
},
{
title: 'Biology Building',
lat: 33.21221158,
lng: -87.54229188,
infoWindow: {
content: 'Biology Building
HTML Content
'
}
}
]);
Street View can create a panoramic of any available street. To easily find the lat/lng of an available street, visit Google Maps and grab the lat/lng from the URL that Google generates when you are on the desired Street View location.
You can also define the POV (heading and pitch). Please see Google's documentation for appropriate values.
<div id="map-3" class="map"></div>
var map_3;
map_3 = new GMaps.createPanorama({
el: '#map-3',
lat : 33.2095667,
lng : -87.5463086,
pov : {
heading : 0,
pitch : -10
},
});
Custom color styling can be applied to just about any map element. For more information, please see the Google Maps documentation.
For convenience, several pre-configured styles are included below.
<div id="map-4" class="map"></div>
var stylesGrayscale = [{ 'featureType': 'landscape', 'stylers': [{ 'saturation': -100 }, { 'lightness': 65 }, { 'visibility': 'on' }]}, { 'featureType': 'poi', 'stylers': [{ 'saturation': -100 }, { 'lightness': 51 }, { 'visibility': 'simplified' }]}, { 'featureType': 'road.highway', 'stylers': [{ 'saturation': -100 }, { 'visibility': 'simplified' }]}, { 'featureType': 'road.arterial', 'stylers': [{ 'saturation': -100 }, { 'lightness': 30 }, { 'visibility': 'on' }]}, { 'featureType': 'road.local', 'stylers': [{ 'saturation': -100 }, { 'lightness': 40 }, { 'visibility': 'on' }]}, { 'featureType': 'transit', 'stylers': [{ 'saturation': -100 }, { 'visibility': 'simplified' }]}, { 'featureType': 'administrative.province', 'stylers': [{ 'visibility': 'off' }]}, { 'featureType': 'water', 'elementType': 'labels', 'stylers': [{ 'visibility': 'on' }, { 'lightness': -25 }, { 'saturation': -100 }]}, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': [{ 'hue': '#ffff00' }, { 'lightness': -25 }, { 'saturation': -97 }]}];
var map_4;
map_4 = new GMaps({
div: '#map-4',
lat: 33.211655052789496,
lng: -87.53979206085205,
zoom: 14
});
map_4.addStyle({
styledMapName: 'Grayscale Map',
styles: stylesGrayscale,
mapTypeId: 'grayscale'
});
map_4.setStyle( 'grayscale' );
<div id="map-5" class="map"></div>
var stylesParks = [{ 'featureType': 'landscape.man_made', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#dde1d4' }]}, { 'featureType': 'landscape.natural', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' }, { 'color': '#dee6e6' }]}, { 'featureType': 'road', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#FCFFF5' }]}, { 'featureType': 'poi.park', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#73AB7D' }]}, { 'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': [{ 'color': '#767676' }]}, { 'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [{ 'color': '#ffffff' }]}, { 'featureType': 'road.highway', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#7e7341' }]}, { 'featureType': 'road', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#808080' }, { 'lightness': 54 }]}, { 'featureType': 'poi.park', 'stylers': [{ 'visibility': 'on' }]}, { 'featureType': 'poi.sports_complex', 'stylers': [{ 'visibility': 'on' }]}, { 'featureType': 'poi.medical', 'stylers': [{ 'visibility': 'on' }]}, { 'featureType': 'poi.business', 'stylers': [{ 'visibility': 'simplified' }]}, { 'featureType': 'water', 'stylers': [{ 'color': '#6196AD' }]}];
var map_5;
map_5 = new GMaps({
div: '#map-5',
lat: 33.211655052789496,
lng: -87.53979206085205,
zoom: 14
});
map_5.addStyle({
styledMapName: 'Parks Map',
styles: stylesParks,
mapTypeId: 'parks'
});
map_5.setStyle( 'parks' );
<div id="map-6" class="map"></div>
var stylesApple = [{ 'featureType': 'water', 'elementType': 'geometry', 'stylers': [{ 'color': '#a1daf2' }] }, { 'featureType': 'landscape.man_made', 'elementType': 'geometry', 'stylers': [{ 'color': '#f7f1df' }] }, { 'featureType': 'landscape.natural', 'elementType': 'geometry', 'stylers': [{ 'color': '#d0e3b4' }] }, { 'featureType': 'landscape.natural.terrain', 'elementType': 'geometry', 'stylers': [{ 'visibility': 'off' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#c8f0b9' }] }, { 'featureType': 'poi.medical', 'elementType': 'geometry', 'stylers': [{ 'color': '#fbcbdd' }] }, { 'featureType': 'poi.business', 'stylers': [{ 'visibility': 'off' }] }, { 'featureType' : 'poi.school', 'stylers' : [{ 'color' : '#ebdvc8' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#fcfcdd' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#f3b546' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#fcfcdd' }] }, { 'featureType' : 'road.arterial', 'elementType' : 'geometry.stroke', 'stylers' : [{ 'color' : '#f3b546' }] }, { 'featureType': 'road.local', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#fcfff6' }] }, { 'featureType': 'transit.station.airport', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cfb2db' }] }];
var map_6;
map_6 = new GMaps({
div: '#map-6',
lat: 33.211655052789496,
lng: -87.53979206085205,
zoom: 14
});
map_6.addStyle({
styledMapName: 'Apple Maps',
styles: stylesApple,
mapTypeId: 'apple'
});
map_6.setStyle( 'apple' );