Sain bnu ene tseguudiig yj hoorond ni holboh uu
Tsegee dynamicaar avj bgaa.
<script type="text/javascript">
!function(e){
var markerIcon = {
// anchor: new google.maps.Point(22, 16),
url: 'images/marker.png',
}
function mainMap() {
function locationData(locationURL, locationCategory, locationImg, locationTitle, locationAddress, locationPhone, locationStarRating, locationRevievsCounter) {
return ('<div class="map-popup-wrap"><div class="map-popup"><div class="infoBox-close"><i class="fa fa-times"></i></div><div class="map-popup-category">' + locationCategory + '</div><a href="' + locationURL + '" class="listing-img-content fl-wrap"><img src="' + locationImg + '"data-src="' +locationImg+ '" data-src-2x="' +locationImg+ '" alt=""></a> <div class="listing-content fl-wrap"><div class="card-popup-raining map-card-rainting" data-staRrating="' + locationStarRating + '"><span class="map-popup-reviews-count">( ' + locationRevievsCounter + ' reviews )</span></div><div class="listing-title fl-wrap"><h4><a href=' + locationURL + '>' + locationTitle + '</a></h4><span class="map-popup-location-info"><i class="fa fa-map-marker"></i>' + locationAddress + '</span><span class="map-popup-location-phone"><i class="fa fa-phone"></i>' + locationPhone + '</span></div></div></div></div>')
}
var locations = [
@foreach($spots as $spot)
@foreach($services as $service)
@if($spot->services_id == $service->id)
[locationData('listing-single2.html', "{{ $spot->type}}" , "{!! asset("services/". $service->image) !!}" , "{{$service->name }}", "{{ $service->address}}", "{{ $service->phone}}", "5", "27"), "{{ $spot->latitude}}", "{{ $spot->longitude}}", {{$spot->id}}, markerIcon],
@endif
@endforeach
@endforeach
];
var mapZoomAttr = $('#map-main').attr('data-map-zoom');
var mapScrollAttr = $('#map-main').attr('data-map-scroll');
if (typeof mapZoomAttr !== typeof undefined && mapZoomAttr !== false) {
var zoomLevel = parseInt(mapZoomAttr);
}
else {
var zoomLevel = 10;
}
if (typeof mapScrollAttr !== typeof undefined && mapScrollAttr !== false) {
var scrollEnabled = parseInt(mapScrollAttr);
}
else {
var scrollEnabled = false;
}
$('.nextmap-nav').on("click", function (e) {
e.preventDefault();
map.setZoom(14);
var index = currentInfobox;
if (index + 1 < allMarkers.length) {
google.maps.event.trigger(allMarkers[index + 1], 'click');
}
else {
google.maps.event.trigger(allMarkers[0], 'click');
}
});
$('.prevmap-nav').on("click", function (e) {
e.preventDefault();
map.setZoom(14);
if (typeof (currentInfobox) == "undefined") {
google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
}
else {
var index = currentInfobox;
if (index - 1 < 0) {
google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
}
else {
google.maps.event.trigger(allMarkers[index - 1], 'click');
}
}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map-main'), {
zoom: 5.8,
scrollwheel: scrollEnabled,
center: new google.maps.LatLng(47.233091, 105.760689),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
panControl: false,
navigationControl: false,
streetViewControl: false,
animation: google.maps.Animation.BOUNCE,
gestureHandling: 'cooperative',
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}
]
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
var boxText = document.createElement("div");
boxText.className = 'map-box'
var currentInfobox;
var boxOptions = {
content: boxText,
disableAutoPan: true,
alignBottom: true,
maxWidth: 300,
pixelOffset: new google.maps.Size(-140, -45),
zIndex: null,
boxStyle: {
width: "260px"
},
closeBoxMargin: "0",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
};
var markerCluster, marker, i;
var allMarkers = [];
var clusterStyles = [{
url: '',
height: 40,
width: 40
}];
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
function ZoomControl(controlDiv, map) {
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv);
controlDiv.style.padding = '5px';
var controlWrapper = document.createElement('div');
controlDiv.appendChild(controlWrapper);
var zoomInButton = document.createElement('div');
zoomInButton.className = "mapzoom-in";
controlWrapper.appendChild(zoomInButton);
var zoomOutButton = document.createElement('div');
zoomOutButton.className = "mapzoom-out";
controlWrapper.appendChild(zoomOutButton);
google.maps.event.addDomListener(zoomInButton, 'click', function () {
map.setZoom(map.getZoom() + 1);
});
google.maps.event.addDomListener(zoomOutButton, 'click', function () {
map.setZoom(map.getZoom() - 1);
});
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(locations[i][1],
locations[i][2]),
icon: locations[i][4],
id: i
});
allMarkers.push(marker);
var ib = new InfoBox();
google.maps.event.addListener(ib, 'domready', function () {
cardRaining();
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
ib.setOptions(boxOptions);
boxText.innerHTML = locations[i][0];
ib.open(map, marker);
currentInfobox = marker.id;
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
map.panTo(latLng);
map.panBy(0, -180);
google.maps.event.addListener(ib, 'domready', function () {
$('.infoBox-close').click(function (e) {
e.preventDefault();
ib.close();
});
});
}
})(marker, i));
}
var options = {
imagePath: 'images/',
styles: clusterStyles,
minClusterSize: 2
};
markerCluster = new MarkerClusterer(map, allMarkers, options);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
var map = document.getElementById('map-main');
if (typeof (map) != 'undefined' && map != null) {
google.maps.event.addDomListener(window, 'load', mainMap);
}
function singleMap() {
var myLatLng = {
lng: $('#singleMap').data('longitude'),
lat: $('#singleMap').data('latitude'),
};
var single_map = new google.maps.Map(document.getElementById('singleMap').addEventListener('change', onChangeHandler), {
zoom: 14,
center: myLatLng,
scrollwheel: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
panControl: false,
navigationControl: false,
streetViewControl: false,
styles: [{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#f2f2f2"
}]
}]
});
var marker = new google.maps.Marker({
position: myLatLng,
map: single_map,
icon: markerIcon,
title: 'Our Location'
});
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, single_map);
function ZoomControl(controlDiv, single_map) {
zoomControlDiv.index = 1;
single_map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv);
controlDiv.style.padding = '5px';
var controlWrapper = document.createElement('div');
controlDiv.appendChild(controlWrapper);
var zoomInButton = document.createElement('div');
zoomInButton.className = "mapzoom-in";
controlWrapper.appendChild(zoomInButton);
var zoomOutButton = document.createElement('div');
zoomOutButton.className = "mapzoom-out";
controlWrapper.appendChild(zoomOutButton);
google.maps.event.addDomListener(zoomInButton, 'click', function () {
single_map.setZoom(single_map.getZoom() + 1);
});
google.maps.event.addDomListener(zoomOutButton, 'click', function () {
single_map.setZoom(single_map.getZoom() - 1);
});
}
}
var single_map = document.getElementById('singleMap');
if (typeof (single_map) != 'undefined' && single_map != null) {
google.maps.event.addDomListener(window, 'load', singleMap);
}
}(this.jQuery);
</script>