nate-v
9/16/2015 - 2:34 PM
Google map setup
Google map setup
//=================================================
// Google Map
//=================================================
function initMap() {
//=================================================
// Define Styles
//=================================================
var styleArray = [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#e9e9e9"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 21
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#dedede"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}, {
"lightness": 16
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#333333"
}, {
"lightness": 40
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#f2f2f2"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}];
//=================================================
// Create a map
//=================================================
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(49.890768, -97.126978),
scrollwheel: false,
styles: styleArray,
zoom: 13,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: true
});
//=================================================
// Create info windows
//=================================================
var infowindow = new google.maps.InfoWindow();
//=================================================
// Array of locations for pins
//=================================================
var locations = [
['2385 23 St. NE', 51.078282, -114.006142, 6],
['1233 Wall St.', 49.903471, -97.181762, 5],
['331 Provencher Blvd', 49.894266, -97.115014, 4],
['335 Provencher Blvd', 49.894335, -97.114749, 3],
['245 Marion St.', 49.881811, -97.117060, 2],
['347 Marion St.', 49.882039, -97.111377, 1],
];
var devlocations = [
['663 Marion St.', 49.882204, -97.093580, 1]
];
//=================================================
// Create map pins and info windows
//=================================================
var marker, i;
var inDev = {
path: 'M23.2,11.6c0,1.6-0.2,3-0.7,4.1l-8.2,17.5c-0.2,0.5-0.6,0.9-1.1,1.2c-0.5,0.3-1,0.4-1.5,0.4c-0.5,0-1.1-0.1-1.5-0.4 c-0.5-0.3-0.8-0.7-1.1-1.2L0.7,15.6C0.2,14.6,0,13.2,0,11.6c0-3.2,1.1-5.9,3.4-8.2C5.7,1.1,8.4,0,11.6,0c3.2,0,5.9,1.1,8.2,3.4 C22.1,5.7,23.2,8.4,23.2,11.6z M15.7,15.7c1.1-1.1,1.7-2.5,1.7-4.1s-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7c-1.6,0-3,0.6-4.1,1.7 C6.4,8.6,5.8,10,5.8,11.6s0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7C13.2,17.4,14.6,16.8,15.7,15.7z',
fillColor: '#89929F',
fillOpacity: 0.8,
scale: 1,
strokeColor: '#89929F',
strokeWeight: 1,
};
var ops = {
path: 'M23.2,11.6c0,1.6-0.2,3-0.7,4.1l-8.2,17.5c-0.2,0.5-0.6,0.9-1.1,1.2c-0.5,0.3-1,0.4-1.5,0.4c-0.5,0-1.1-0.1-1.5-0.4 c-0.5-0.3-0.8-0.7-1.1-1.2L0.7,15.6C0.2,14.6,0,13.2,0,11.6c0-3.2,1.1-5.9,3.4-8.2C5.7,1.1,8.4,0,11.6,0c3.2,0,5.9,1.1,8.2,3.4 C22.1,5.7,23.2,8.4,23.2,11.6z M15.7,15.7c1.1-1.1,1.7-2.5,1.7-4.1s-0.6-3-1.7-4.1c-1.1-1.1-2.5-1.7-4.1-1.7c-1.6,0-3,0.6-4.1,1.7 C6.4,8.6,5.8,10,5.8,11.6s0.6,3,1.7,4.1c1.1,1.1,2.5,1.7,4.1,1.7C13.2,17.4,14.6,16.8,15.7,15.7z',
fillColor: '#00aeef',
fillOpacity: 0.8,
scale: 1,
strokeColor: '#00a2df',
strokeWeight: 1,
};
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: ops,
map: map,
animation: google.maps.Animation.DROP
//icon: new google.maps.MarkerImage('/wp-content/themes/cinch/img/map-icon.svg',
//null, null, null, new google.maps.Size(64,64))
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
for (i = 0; i < devlocations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(devlocations[i][1], devlocations[i][2]),
icon: inDev,
map: map,
animation: google.maps.Animation.DROP
//icon: new google.maps.MarkerImage('/wp-content/themes/cinch/img/map-icon.svg',
//null, null, null, new google.maps.Size(64,64))
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(devlocations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//=================================================
// Button Click will center on new location
//=================================================
function newLocation(newLat, newLng) {
map.setCenter({
lat: newLat,
lng: newLng
});
}
var cookie = "";
jQuery(".alberta").on('click', function() {
newLocation(51.078283, -114.006182);
map.setZoom(13);
jQuery(this).addClass('map-active');
jQuery('.manitoba').removeClass('map-active');
});
jQuery(".manitoba").on('click', function() {
newLocation(49.890768, -97.126978);
map.setZoom(13);
jQuery(this).addClass('map-active');
jQuery('.alberta').removeClass('map-active');
});
jQuery('.manitoba').addClass('map-active');
//=================================================
// Write map selection to cookie
//=================================================
// feature coming soon
}
//end map