Notes

var map, marker, position, geocoder, bounds;
var postalCodeArr;
//var componentForm = {
// street_number : 'short_name',
// route : 'long_name',
// locality : 'long_name',
// administrative_area_level_1 : 'short_name',
// country : 'long_name',
// postal_code : 'short_name'
//};

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types : [ 'geocode' ]
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', initMapInRequestedLocation);
// initMap(1.4854, 103.7618);
initMapInCurrentLocation();
}

function initMapInCurrentLocation() {
// if (navigator.geolocation) {
// navigator.geolocation.getCurrentPosition(function(position) {
// initMap(position.coords.latitude, position.coords.longitude);
// });
// } else {
// initMap(22.56, 88.4335);
// }
initMap(28.4594965, 77.02663830000006);
}

function initMapInRequestedLocation() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
initMap(lat, lng);

// postalCodeArr = [];
// for (var i = 0; i < place.address_components.length; i++) {
// for (var j = 0; j < place.address_components[i].types.length; j++) {
// if (place.address_components[i].types[j] == "postal_code") {
// postalCodeArr.push(place.address_components[i].long_name);
// }
// }
// }
// if(postalCodeArr.length == 0) alert("Postal code of this location not found. Please change the location");
// else getAdRules();
}

function initMap(lat, lng) {
position = {
lat : lat,
lng : lng
};

map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom : 16,
center : position,
mapTypeId : 'roadmap'
});

var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);

centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);
marker = new google.maps.Marker({
position : position,
map : map,
draggable: true
});
geocoder = new google.maps.Geocoder();
google.maps.event.addListener(marker, "dragend", function (e) {
getPostalCode();
});
getPostalCode();
}

function load_markers() {
bounds = new google.maps.LatLngBounds();

// Display a map on the page
//map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// map.setTilt(45);

// Multiple Markers
var markers = [ [ 'Bikaner', 28.0229, 73.3119 ],
[ 'Jodhpur', 26.2389, 73.0243 ], [ 'Kota', 25.2138, 75.8648 ], [ 'Infinity Benchmark', 22.56, 88.4335 ] ];

// Info Window Content
var infoWindowContent = [
[ '<div id="content">'
+ '<div id="siteNotice">'
+ '</div>'
+ '<h1 id="firstHeading" class="firstHeading">Rules need to follow before you advertise near Infinity Benchmark</h1>'
+ '<img src="ad1.bmp">' + '<img src="ad2.bmp">' + '</div>'
],
[ '<div id="content">'
+ '<div id="siteNotice">'
+ '</div>'
+ '<h1 id="firstHeading" class="firstHeading">Rules need to follow before you advertise near Infinity Benchmark</h1>'
+ '<img src="ad1.bmp">' + '<img src="ad2.bmp">' + '</div>'
],
[ '<div id="content">'
+ '<div id="siteNotice">'
+ '</div>'
+ '<h1 id="firstHeading" class="firstHeading">Rules need to follow before you advertise near Infinity Benchmark</h1>'
+ '<img src="ad1.bmp">' + '<img src="ad2.bmp">' + '</div>'
],
[ '<div id="content">'
+ '<div id="siteNotice">'
+ '</div>'
+ '<h1 id="firstHeading" class="firstHeading">Rules need to follow before you advertise near Infinity Benchmark</h1>'
+ '<img src="ad1.bmp">' + '<img src="ad2.bmp">' + '</div>'
]
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position : position,
map : map,
title : markers[i][0]
});

// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure
// it only runs once)
// var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
// this.setZoom(4);
// google.maps.event.removeListener(boundsListener);
// });
}

function CenterControl(controlDiv, map) {

// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginRight = '10px';
controlUI.style.marginTop = '10px';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'green';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '30px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.title = 'Show/Download Compliances';
controlText.innerHTML = '<i class="fa fa-file-excel-o" aria-hidden="true"></i>';
controlUI.appendChild(controlText);

// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
getComplianceExcel($("#hiddenMunicipalId").val());
});
}

function getPostalCode() {
postalCodeArr = [];
geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
console.log(results);
console.log(status);
if (status == google.maps.GeocoderStatus.OK) {
for(var i = 0; i < results.length; i++) {
for(var j = 0; j < results[i].address_components.length; j++) {
for(var k = 0; k < results[i].address_components[j].types.length; k++) {
if(results[i].address_components[j].types[k] == "postal_code") {
if(postalCodeArr.indexOf(results[i].address_components[j].long_name) < 0) {
postalCodeArr.push(results[i].address_components[j].long_name);
}
}
}
}
}
} else if(status == google.maps.GeocoderStatus.ZERO_RESULTS){
var searchInput = $("#autocomplete").val();
if(searchInput.includes('Srinagar')) {
postalCodeArr.push(190012);
}
}
if(postalCodeArr.length == 0) alert("Postal code of this location not found. Please change the position a bit !!!");
else getAdRules();
});
}

function getAdRules() {
var adRulesURL = "/" + $("#appName").val() + "/geoAd/getRules";
$.ajax({
url: adRulesURL,
data: {postalCodes: postalCodeArr},
success: function(data) {
if(data.length > 0) {
$("#hiddenMunicipalId").val(data[0][0]);
loadRuleData(data);
// loadNewRuleData(data);
} else {
$("#hiddenMunicipalId").val('');
loadNoDataDom();
}
}
});
}

function loadRuleData(ruleData) {
var ruleDataHtml = '';
var municipalInfoId, imageName, imgSrc;
municipalInfoId = ruleData[0][0];
for(i = 0; i < ruleData.length; i++) {
imageName = ruleData[i][3];
imgSrc = "/" + $("#appName").val() + "/geoAd/getImage?municipalInfoId=" + municipalInfoId + "&imgName=" + imageName;
ruleDataHtml += '<div class="cbp-item '+ruleData[i][2]+'">';
ruleDataHtml += '<div class="cbp-caption">'
ruleDataHtml += '<div class="cbp-caption-defaultWrap">';
ruleDataHtml += '<img src="'+imgSrc+'" alt="" border="5">';
ruleDataHtml += '</div>';
ruleDataHtml += '<div class="cbp-caption-activeWrap">';
ruleDataHtml += '<div class="cbp-l-caption-alignCenter">';
ruleDataHtml += '<div class="cbp-l-caption-body">';
ruleDataHtml += '<a href="'+imgSrc+'" class="cbp-lightbox cbp-l-caption-buttonRight btn red uppercase btn red uppercase" data-title="Dashboard<br>by Lexplosion Solutions Pvt. Ltd.">';
ruleDataHtml += 'View Larger';
ruleDataHtml += '</a>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
}

$("#rule_title").text(ruleData[0][1]);
$("#rule_data").html(ruleDataHtml);
if(!$("#rule_data").hasClass('cbp')) {
$("#rule_data").addClass('cbp');
loadCbp();
} else {
reloadCbp();
}

}

function loadNewRuleData(ruleData) {
var ruleDataHtml = '';
var images, imgSrc;
for(i = 0; i < ruleData.length; i++) {
images = ruleData[i][5].split(",");
for(j = 0; j < images.length; j++) {
imgSrc = "/" + $("#appName").val() + "/geoAd/getImage?municipalInfoId=" + ruleData[0][0] + "&imgName=" + images[j];
ruleDataHtml += '<div class="cbp-item '+ruleData[i][4]+'">';
ruleDataHtml += '<div class="cbp-caption">'
ruleDataHtml += '<div class="cbp-caption-defaultWrap">';
ruleDataHtml += '<img src="'+imgSrc+'" alt="" border="5">';
ruleDataHtml += '</div>';
ruleDataHtml += '<div class="cbp-caption-activeWrap">';
ruleDataHtml += '<div class="cbp-l-caption-alignCenter">';
ruleDataHtml += '<div class="cbp-l-caption-body">';
ruleDataHtml += '<a href="'+imgSrc+'" class="cbp-lightbox cbp-l-caption-buttonRight btn red uppercase btn red uppercase" data-title="Dashboard<br>by Lexplosion Solutions Pvt. Ltd.">';
ruleDataHtml += 'View Larger';
ruleDataHtml += '</a>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
ruleDataHtml += '</div>';
}
}

$("#rule_title").text(ruleData[0][1]);
$("#rule_data").html(ruleDataHtml);
if(!$("#rule_data").hasClass('cbp')) {
$("#rule_data").addClass('cbp');
loadCbp();
} else {
reloadCbp();
}

}

function loadNoDataDom() {
var domHtml = '<div class="col-md-12">';
domHtml += '<h4>Data Only available for the below mentioned Areas -</h4>';
domHtml += '<ul>';
domHtml += '<li>Rajasthan</li>';
domHtml += '<ul>';
domHtml += '<li>Bikaner</li>';
domHtml += '<li>Jodhpur</li>';
domHtml += '</ul>';
domHtml += '<li>Orissa</li>';
domHtml += '<ul>';
domHtml += '<li>Bhubaneshwar</li>';
domHtml += '</ul>';
domHtml += '<li>Jammu & Kashmir</li>';
domHtml += '<ul>';
domHtml += '<li>Srinagar</li>';
domHtml += '</ul>';
domHtml += '</ul>';
domHtml += '</div>';

$("#rule_title").text("No Data found in the requested Location");
$("#rule_data").removeClass('cbp');
$("#rule_data").html(domHtml);
}

function getComplianceExcel(municipalId) {
if(municipalId != '') {
window.open("/"+ $("#appName").val() + "/geoAd/downloadComplianceExcel?municipalInfoId="+municipalId);
}
}