var infoBox_ratingType = 'star-rating'; (function($) { "use strict"; function mainMap() { var ib = new InfoBox(); function locationData(locationURL, locationImg, locationTitle, locationAddress,) { return ('' + '' + '
' + '' + '
' + '

' + locationTitle + '

' + '' + locationAddress + '' + '
' + '
' + '
' + '
' + '
' + '
') } var locations = [ [locationData('job-detail.html', 'images/jobs-company/pic2.jpg', 'Senior Rolling Stock Technician', 'NJ 07932, United States of America', '4.0', '06'),40.78263477785881,-74.3855024580078, 4,''], [locationData('job-detail.html', 'images/jobs-company/pic3.jpg', 'IT Department Manager', 'NJ 10921, United States of America', '4.0', '12'),41.3212039026965,-74.35902140895382, 5,''], [locationData('job-detail.html', 'images/jobs-company/pic5.jpg', 'Recreation & Fitness Worker', 'NJ 07481, United States of America', '4.0', '06'),40.974261526761296,-74.15371440211788, 8,''], [locationData('job-detail.html', 'images/jobs-company/pic2.jpg', 'Senior Web Designer , Developer', 'NJ 07646, United States of America', '4.0', '06'),40.92222618539489,-74.02393840114132, 9, ''], [locationData('job-detail.html', 'images/jobs-company/pic1.jpg', '61 John Street', 'NJ 07481, United States of America', '4.0', '06'),40.84422081239799,-74.27912244349648, 13,''], [locationData('job-detail.html', 'images/jobs-company/pic5.jpg', 'Recreation & Fitness Worker', 'NJ 07646, United States of America', '4.0', '06'),40.79520211025921,-74.35534009486366, 14,''], [locationData('job-detail.html', 'images/jobs-company/pic4.jpg', 'Art Production Specialist', 'st Street, Mineola, NY 11501, United States of America', '4.0', '06'),40.69722959123321,-74.4068385079496, 10,''], [locationData('job-detail.html', 'images/jobs-company/pic2.jpg', 'Senior Rolling Stock Technician', 'NY 11798, United States of America', '4.0', '06'),40.79381588568169,-74.99666699916054, 15,''], [locationData('job-detail.html', 'images/jobs-company/pic3.jpg', 'IT Department Manager', 'NY 11782, United States of America', '4.0', '06'),40.7686857353089,-75.14704236537148, 16,''], [locationData('job-detail.html', 'images/jobs-company/pic2.jpg', 'Senior Web Designer , Developer', '1363-1385 Sunset Blvd Los Angeles, CA 90026, USA', '4.0', '06'),40.66963252905638,-75.34685620814491, 17, ''], ]; var mapZoomAttr = $('#map').attr('data-map-zoom'); var mapScrollAttr = $('#map').attr('data-map-scroll'); if (typeof mapZoomAttr !== typeof undefined && mapZoomAttr !== false) { var zoomLevel = parseInt(mapZoomAttr); } else { var zoomLevel = 5; } if (typeof mapScrollAttr !== typeof undefined && mapScrollAttr !== false) { var scrollEnabled = parseInt(mapScrollAttr); } else { var scrollEnabled = false; } var map = new google.maps.Map(document.getElementById('map'), { zoom: zoomLevel, scrollwheel: scrollEnabled, center: new google.maps.LatLng(40.80, -73.70), mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, mapTypeControl: false, scaleControl: false, panControl: false, navigationControl: false, streetViewControl: false, gestureHandling: 'cooperative', styles: [ { "featureType": "administrative.locality", "elementType": "all", "stylers": [ { "hue": "#2c2e33" }, { "saturation": 7 }, { "lightness": 19 }, { "visibility": "on" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text", "stylers": [ { "visibility": "on" }, { "saturation": "-3" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#1967d2" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "simplified" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "off" } ] }, { "featureType": "poi.school", "elementType": "geometry.fill", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" }, { "visibility": "on" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "hue": "#ff6f00" }, { "saturation": "100" }, { "lightness": 31 }, { "visibility": "simplified" } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "hue": "#008eff" }, { "saturation": -93 }, { "lightness": 31 }, { "visibility": "on" } ] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "visibility": "on" }, { "color": "#f3dbc8" }, { "saturation": "0" } ] }, { "featureType": "road.arterial", "elementType": "labels", "stylers": [ { "hue": "#bbc0c4" }, { "saturation": -93 }, { "lightness": -2 }, { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -90 }, { "lightness": -8 }, { "visibility": "simplified" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": 10 }, { "lightness": 69 }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -78 }, { "lightness": 67 }, { "visibility": "simplified" } ] } ] }); $('.listing-item-container').on('mouseover', function() { var listingAttr = $(this).data('marker-id'); if (listingAttr !== undefined) { var listing_id = $(this).data('marker-id') - 1; var marker_div = allMarkers[listing_id].div; $(marker_div).addClass('clicked'); $(this).on('mouseout', function() { if ($(marker_div).is(":not(.infoBox-opened)")) { $(marker_div).removeClass('clicked'); } }); } }); var boxText = document.createElement("div"); boxText.className = 'map-box' var currentInfobox; var boxOptions = { content: boxText, disableAutoPan: false, alignBottom: true, maxWidth: 0, pixelOffset: new google.maps.Size(-134, -55), zIndex: null, boxStyle: { width: "270px" }, closeBoxMargin: "0", closeBoxURL: "", infoBoxClearance: new google.maps.Size(25, 25), isHidden: false, pane: "", enableEventPropagation: false, }; var markerCluster, overlay, i; var allMarkers = []; var clusterStyles = [{ textColor: 'white', url: '', height: 50, width: 50 }]; var markerIco; for (i = 0; i < locations.length; i++) { markerIco = locations[i][4]; var overlaypositions = new google.maps.LatLng(locations[i][1], locations[i][2]), overlay = new CustomMarker(overlaypositions, map, { marker_id: i }, markerIco); allMarkers.push(overlay); google.maps.event.addDomListener(overlay, 'click', (function(overlay, i) { return function() { ib.setOptions(boxOptions); boxText.innerHTML = locations[i][0]; ib.close(); ib.open(map, overlay); currentInfobox = locations[i][3]; google.maps.event.addListener(ib, 'domready', function() { $('.infoBox-close').click(function(e) { e.preventDefault(); ib.close(); $('.map-marker-container').removeClass('clicked infoBox-opened'); }); }); } })(overlay, 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 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'; controlDiv.className = "zoomControlWrapper"; var controlWrapper = document.createElement('div'); controlDiv.appendChild(controlWrapper); var zoomInButton = document.createElement('div'); zoomInButton.className = "custom-zoom-in"; controlWrapper.appendChild(zoomInButton); var zoomOutButton = document.createElement('div'); zoomOutButton.className = "custom-zoom-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); }); } } var map = document.getElementById('map'); if (typeof(map) != 'undefined' && map != null) { google.maps.event.addDomListener(window, 'load', mainMap); } //====================================Map In Popup======================================================// //single list map in popup function singleListingMappopup() { var myLatlng_popup = new google.maps.LatLng({ lng: $('#singleListingMappopup').data('longitude'), lat: $('#singleListingMappopup').data('latitude'), }); var single_map_popup = new google.maps.Map(document.getElementById('singleListingMappopup'), { zoom: 15, center: myLatlng_popup, scrollwheel: false, zoomControl: false, mapTypeControl: false, scaleControl: false, panControl: false, navigationControl: false, streetViewControl: false, styles: [ { "featureType": "administrative.locality", "elementType": "all", "stylers": [ { "hue": "#2c2e33" }, { "saturation": 7 }, { "lightness": 19 }, { "visibility": "on" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text", "stylers": [ { "visibility": "on" }, { "saturation": "-3" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#1967d2" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "simplified" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "off" } ] }, { "featureType": "poi.school", "elementType": "geometry.fill", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" }, { "visibility": "on" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "hue": "#ff6f00" }, { "saturation": "100" }, { "lightness": 31 }, { "visibility": "simplified" } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "hue": "#008eff" }, { "saturation": -93 }, { "lightness": 31 }, { "visibility": "on" } ] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "visibility": "on" }, { "color": "#f3dbc8" }, { "saturation": "0" } ] }, { "featureType": "road.arterial", "elementType": "labels", "stylers": [ { "hue": "#bbc0c4" }, { "saturation": -93 }, { "lightness": -2 }, { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -90 }, { "lightness": -8 }, { "visibility": "simplified" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": 10 }, { "lightness": 69 }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -78 }, { "lightness": 67 }, { "visibility": "simplified" } ] } ] }); var zoomControlDiv = document.createElement('div'); var zoomControl = new ZoomControl(zoomControlDiv, single_map_popup); function ZoomControl(controlDiv, single_map_popup) { zoomControlDiv.index = 1; single_map_popup.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv); controlDiv.style.padding = '5px'; var controlWrapper_popup = document.createElement('div'); controlDiv.appendChild(controlWrapper); var zoomInButton_popup = document.createElement('div'); zoomInButton_popup.className = "custom-zoom-in"; controlWrapper.appendChild(zoomInButton); var zoomOutButton_popup = document.createElement('div'); zoomOutButton_popup.className = "custom-zoom-out"; controlWrapper_popup.appendChild(zoomOutButton_popup); google.maps.event.addDomListener(zoomInButton_popup, 'click', function() { single_map_popup.setZoom(single_map_popup.getZoom() + 1); }); google.maps.event.addDomListener(zoomOutButton_popup, 'click', function() { single_map_popup.setZoom(single_map_popup.getZoom() - 1); }); } var singleMapIco_popup = ""; new CustomMarker(myLatlng, single_map_popup, { marker_id: '1' }, singleMapIco_popup); } var single_map_popup = document.getElementById('singleListingMappopup'); if (typeof(single_map_popup) != 'undefined' && single_map_popup != null) { google.maps.event.addDomListener(window, 'load', singleListingMappopup); } function CustomMarker(latlng, map, args, markerIco) { this.latlng = latlng; this.args = args; this.markerIco = markerIco; this.setMap(map); } CustomMarker.prototype = new google.maps.OverlayView(); CustomMarker.prototype.draw = function() { var self = this; var div = this.div; if (!div) { div = this.div = document.createElement('div'); div.className = 'map-marker-container'; div.innerHTML = '
' + '
' + '
' + self.markerIco + '
' + '
' + self.markerIco + '
' + '
' + '
' + '
' google.maps.event.addDomListener(div, "click", function(event) { $('.map-marker-container').removeClass('clicked infoBox-opened'); google.maps.event.trigger(self, "click"); $(this).addClass('clicked infoBox-opened'); }); if (typeof(self.args.marker_id) !== 'undefined') { div.dataset.marker_id = self.args.marker_id; } var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latlng); if (point) { div.style.left = (point.x) + 'px'; div.style.top = (point.y) + 'px'; } }; CustomMarker.prototype.remove = function() { if (this.div) { this.div.parentNode.removeChild(this.div); this.div = null; $(this).removeClass('clicked'); } }; CustomMarker.prototype.getPosition = function() { return this.latlng; }; //==============================================Single List Map =============================================// //single list map function singleListingMap() { var myLatlng = new google.maps.LatLng({ lng: $('#singleListingMap').data('longitude'), lat: $('#singleListingMap').data('latitude'), }); var single_map = new google.maps.Map(document.getElementById('singleListingMap'), { zoom: 15, center: myLatlng, scrollwheel: false, zoomControl: false, mapTypeControl: false, scaleControl: false, panControl: false, navigationControl: false, streetViewControl: false, styles: [ { "featureType": "administrative.locality", "elementType": "all", "stylers": [ { "hue": "#2c2e33" }, { "saturation": 7 }, { "lightness": 19 }, { "visibility": "on" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text", "stylers": [ { "visibility": "on" }, { "saturation": "-3" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#1967d2" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "simplified" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "hue": "#ffffff" }, { "saturation": -100 }, { "lightness": 100 }, { "visibility": "off" } ] }, { "featureType": "poi.school", "elementType": "geometry.fill", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" }, { "visibility": "on" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "hue": "#ff6f00" }, { "saturation": "100" }, { "lightness": 31 }, { "visibility": "simplified" } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#1967d2" }, { "saturation": "0" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "hue": "#008eff" }, { "saturation": -93 }, { "lightness": 31 }, { "visibility": "on" } ] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "visibility": "on" }, { "color": "#f3dbc8" }, { "saturation": "0" } ] }, { "featureType": "road.arterial", "elementType": "labels", "stylers": [ { "hue": "#bbc0c4" }, { "saturation": -93 }, { "lightness": -2 }, { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -90 }, { "lightness": -8 }, { "visibility": "simplified" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": 10 }, { "lightness": 69 }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "hue": "#e9ebed" }, { "saturation": -78 }, { "lightness": 67 }, { "visibility": "simplified" } ] } ] }); 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 = "custom-zoom-in"; controlWrapper.appendChild(zoomInButton); var zoomOutButton = document.createElement('div'); zoomOutButton.className = "custom-zoom-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 singleMapIco = ""; new CustomMarker(myLatlng, single_map, { marker_id: '1' }, singleMapIco); } var single_map = document.getElementById('singleListingMap'); if (typeof(single_map) != 'undefined' && single_map != null) { google.maps.event.addDomListener(window, 'load', singleListingMap); } function CustomMarker(latlng, map, args, markerIco) { this.latlng = latlng; this.args = args; this.markerIco = markerIco; this.setMap(map); } CustomMarker.prototype = new google.maps.OverlayView(); CustomMarker.prototype.draw = function() { var self = this; var div = this.div; if (!div) { div = this.div = document.createElement('div'); div.className = 'map-marker-container'; div.innerHTML = '
' + '
' + '
' + self.markerIco + '
' + '
' + self.markerIco + '
' + '
' + '
' + '
' google.maps.event.addDomListener(div, "click", function(event) { $('.map-marker-container').removeClass('clicked infoBox-opened'); google.maps.event.trigger(self, "click"); $(this).addClass('clicked infoBox-opened'); }); if (typeof(self.args.marker_id) !== 'undefined') { div.dataset.marker_id = self.args.marker_id; } var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latlng); if (point) { div.style.left = (point.x) + 'px'; div.style.top = (point.y) + 'px'; } }; CustomMarker.prototype.remove = function() { if (this.div) { this.div.parentNode.removeChild(this.div); this.div = null; $(this).removeClass('clicked'); } }; CustomMarker.prototype.getPosition = function() { return this.latlng; }; })(this.jQuery);