.controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$filter', '$ionicLoading', '$compile','$timeout','$ionicPopup',
function($scope, $http, $location, $window, $filter, $ionicLoading, $compile, $timeout,$ionicPopup) {
$scope.favoriteStore = '';
$scope.Storetype = [{
name: "Nokia"
}, {
name: "Samsung"
}];
$scope.submit = function() {
if ($scope.favoriteStore == 'Nokia') {
alert($('#nokia').val());
} else {
alert($('#samsung').val());
}
}
$http.get('*****').success(function(data, dealers, response) {
// Map initialization logic here
});
}]
)<script type='text/javascript' src='https://fiddle.jshell.net/js/lib/dummy.js'></script>
<script type='text/javascript' src="https://code.jquery.com/jquery-2.0.2.js"></script>
<script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css">
<script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"></script>
<ion-content ng-controller="MapCtrl">
<!-- Form to select store type and services -->
<script type='text/javascript'>//<![CDATA[
$(function() {
$('#nokia').multiselect({
includeSelectAllOption: true
});
$('#samsung').multiselect({
includeSelectAllOption: true
});
});
</script>My code includes a section to handle the Google Maps integration with AngularJS. A filtering functionality is required to filter the map markers based on user selections of store types and services provided by those stores. There are two radio buttons for Nokia and Samsung stores respectively. Based on the selected store and services, the map markers need to be filtered accordingly.
For example:
- If the user selects Nokia and checks Interior Services, only markers for Sakthi Nokia Store and Google Mobile Center should be displayed.
- If the user selects Nokia and checks Interior Services, Regular Services & Maintenance, markers for Sakthi Nokia Store, Google Mobile Center, and Guptha mobile Corner should be displayed.
- If the user selects Samsung and checks Interior Services, markers for Google Mobile Center and Zig zag mobiles should be displayed.