168 lines
10 KiB
Twig
168 lines
10 KiB
Twig
|
<script>
|
||
|
|
google.maps.event.addDomListener(window, 'load', init);
|
||
|
|
var map, markersArray = [];
|
||
|
|
|
||
|
|
function bindInfoWindow(marker, map, location) {
|
||
|
|
google.maps.event.addListener(marker, 'click', function() {
|
||
|
|
function close(location) {
|
||
|
|
location.ib.close();
|
||
|
|
location.infoWindowVisible = false;
|
||
|
|
location.ib = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (location.infoWindowVisible === true) {
|
||
|
|
close(location);
|
||
|
|
} else {
|
||
|
|
markersArray.forEach(function(loc, index){
|
||
|
|
if (loc.ib && loc.ib !== null) {
|
||
|
|
close(loc);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var boxText = document.createElement('div');
|
||
|
|
boxText.style.cssText = 'background: #fff;';
|
||
|
|
boxText.classList.add('md-whiteframe-2dp');
|
||
|
|
|
||
|
|
function buildPieces(location, el, part, icon) {
|
||
|
|
if (location[part] === '') {
|
||
|
|
return '';
|
||
|
|
} else if (location.iw[part]) {
|
||
|
|
switch(el){
|
||
|
|
case 'photo':
|
||
|
|
if (location.photo){
|
||
|
|
return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>';
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'iw-toolbar':
|
||
|
|
return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>';
|
||
|
|
break;
|
||
|
|
case 'div':
|
||
|
|
switch(part){
|
||
|
|
case 'email':
|
||
|
|
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="mailto:' + location.email + '" target="_blank">' + location.email + '</a></span></div>';
|
||
|
|
break;
|
||
|
|
case 'web':
|
||
|
|
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span><a href="' + location.web + '" target="_blank">' + location.web_formatted + '</a></span></div>';
|
||
|
|
break;
|
||
|
|
case 'desc':
|
||
|
|
return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location[part] + '</span></div>';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'open_hours':
|
||
|
|
var items = '';
|
||
|
|
if (location.open_hours.length > 0){
|
||
|
|
for (var i = 0; i < location.open_hours.length; ++i) {
|
||
|
|
if (i !== 0){
|
||
|
|
items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours +'</strong></li>';
|
||
|
|
}
|
||
|
|
var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>' + location.open_hours[0].day + '</strong><strong>' + location.open_hours[0].hours +'</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>';
|
||
|
|
}
|
||
|
|
return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>';
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
boxText.innerHTML =
|
||
|
|
buildPieces(location, 'photo', 'photo', '') +
|
||
|
|
buildPieces(location, 'iw-toolbar', 'title', '') +
|
||
|
|
buildPieces(location, 'div', 'address', 'location_on') +
|
||
|
|
buildPieces(location, 'div', 'web', 'public') +
|
||
|
|
buildPieces(location, 'div', 'email', 'email') +
|
||
|
|
buildPieces(location, 'div', 'tel', 'phone') +
|
||
|
|
buildPieces(location, 'div', 'int_tel', 'phone') +
|
||
|
|
buildPieces(location, 'open_hours', 'open_hours', 'access_time') +
|
||
|
|
buildPieces(location, 'div', 'desc', 'keyboard_arrow_down');
|
||
|
|
|
||
|
|
var myOptions = {
|
||
|
|
alignBottom: true,
|
||
|
|
content: boxText,
|
||
|
|
disableAutoPan: true,
|
||
|
|
maxWidth: 0,
|
||
|
|
pixelOffset: new google.maps.Size(-140, -40),
|
||
|
|
zIndex: null,
|
||
|
|
boxStyle: {
|
||
|
|
opacity: 1,
|
||
|
|
width: '280px'
|
||
|
|
},
|
||
|
|
closeBoxMargin: '0px 0px 0px 0px',
|
||
|
|
infoBoxClearance: new google.maps.Size(1, 1),
|
||
|
|
isHidden: false,
|
||
|
|
pane: 'floatPane',
|
||
|
|
enableEventPropagation: false
|
||
|
|
};
|
||
|
|
|
||
|
|
location.ib = new InfoBox(myOptions);
|
||
|
|
location.ib.open(map, marker);
|
||
|
|
location.infoWindowVisible = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
var mapOptions = {
|
||
|
|
center: new google.maps.LatLng(45.52464731651513, -122.65028208095099),
|
||
|
|
zoom: 16,
|
||
|
|
gestureHandling: 'auto',
|
||
|
|
fullscreenControl: false,
|
||
|
|
zoomControl: true,
|
||
|
|
disableDoubleClickZoom: true,
|
||
|
|
mapTypeControl: true,
|
||
|
|
mapTypeControlOptions: {
|
||
|
|
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
|
||
|
|
},
|
||
|
|
scaleControl: true,
|
||
|
|
scrollwheel: true,
|
||
|
|
streetViewControl: true,
|
||
|
|
draggable : true,
|
||
|
|
clickableIcons: false,
|
||
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||
|
|
styles: [{"featureType":"administrative","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","stylers":[{"color":"#84afa3"},{"lightness":52}]},{"stylers":[{"saturation":-17},{"gamma":0.36}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#3f518c"}]}]
|
||
|
|
}
|
||
|
|
var mapElement = document.getElementById('mapkit-9468');
|
||
|
|
var map = new google.maps.Map(mapElement, mapOptions);
|
||
|
|
var locations = [
|
||
|
|
{"title":"Voodoo Doughnut Too","address":"1501 NE Davis St, Portland, OR 97232, USA","desc":"","tel":"(503) 235-2666","int_tel":"+1 503-235-2666","email":"","web":"http://voodoodoughnuts.com","web_formatted":"voodoodoughnuts.com","open":"","time":"0742","lat":45.5244594,"lng":-122.65047520000002,"vicinity":"1501 Northeast Davis Street, Portland","open_hours":[{"day":"Monday","hours":"open24hours","$$hashKey":"object:1722"},{"day":"Tuesday","hours":"open24hours","$$hashKey":"object:1723"},{"day":"Wednesday","hours":"open24hours","$$hashKey":"object:1724"},{"day":"Thursday","hours":"open24hours","$$hashKey":"object:1725"},{"day":"Friday","hours":"open24hours","$$hashKey":"object:1726"},{"day":"Saturday","hours":"open24hours","$$hashKey":"object:1727"},{"day":"Sunday","hours":"open24hours","$$hashKey":"object:1728"}],"marker":{"fillColor":"#4CAF50","fillOpacity":1,"strokeWeight":0,"scale":1.5,"path":"M10.2,0C4.6,0,0,4.6,0,10.2c0,6.9,7.8,6.3,10.2,26.4c2.5-20.1,10.2-19.5,10.2-26.4C20.4,4.6,15.9,0,10.2,0z M10.2,13.9c-2.4,0-4.3-1.9-4.3-4.3s1.9-4.3,4.3-4.3s4.3,1.9,4.3,4.3C14.6,12,12.6,13.9,10.2,13.9z","anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":3},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}}
|
||
|
|
];
|
||
|
|
|
||
|
|
var layer = new google.maps.TrafficLayer();
|
||
|
|
layer.setMap(map);
|
||
|
|
|
||
|
|
for (i = 0; i < locations.length; i++) {
|
||
|
|
marker = new google.maps.Marker({
|
||
|
|
icon: locations[i].marker,
|
||
|
|
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
|
||
|
|
map: map,
|
||
|
|
title: locations[i].title,
|
||
|
|
address: locations[i].address,
|
||
|
|
desc: locations[i].desc,
|
||
|
|
tel: locations[i].tel,
|
||
|
|
int_tel: locations[i].int_tel,
|
||
|
|
vicinity: locations[i].vicinity,
|
||
|
|
open: locations[i].open,
|
||
|
|
open_hours: locations[i].open_hours,
|
||
|
|
photo: locations[i].photo,
|
||
|
|
time: locations[i].time,
|
||
|
|
email: locations[i].email,
|
||
|
|
web: locations[i].web,
|
||
|
|
iw: locations[i].iw
|
||
|
|
});
|
||
|
|
markersArray.push(marker);
|
||
|
|
|
||
|
|
if (locations[i].iw.enable === true){
|
||
|
|
bindInfoWindow(marker, map, locations[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|