<!DOCTYPE html>
<html ng-app="storelocator" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Store Locator</title>
<meta name="description" content="Store Locator">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<md-toolbar class="md-default-theme">
<div layout="row">
<div flex-gt-md="5" flex-gt-lg="10"></div>
<div flex>
<div class="md-toolbar-tools">
<a class="md-button md-raised" href="#home">Store Locator</a>
<span flex></span>
<button class="md-primary md-button md-raised">Menu</button>
</div>
</div>
<div flex-gt-md="5" flex-gt-lg="10"></div>
</div>
</md-toolbar>
<div id="body-x-toolbar" ng-view></div>
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script src="script.js"></script>
<script src="config.js"></script>
<script src="controllers.js"></script>
</body>
</html>
// Code goes here
/* App Module */
var storelocator = angular.module('storelocator', ['ngRoute', 'ngMaterial']);
storelocator.config(['$routeProvider', '$mdThemingProvider',
function ($routeProvider, $mdThemingProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController',
}).when('/map', {
templateUrl: 'partials/map.html',
controller: 'MapsController',
}).otherwise({
redirectTo: '/home',
});
}]);
storelocator.factory('dataService', [function() {
var data = {
locationDone: 0,
position: null,
option: null
}
var getLocation = function() {
data.locationDone = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
data.locationDone = 1;
data.position = pos;
}, function () {
data.locationDone = 2;
});
} else {
data.locationDone = 3;
}
console.log('got location ', data.locationDone);
};
getLocation();
return data
}]);
/* Styles go here */
#body-x-toolbar, #map-canvas {
height: 92%;
}
storelocator.value( 'varTypes', {
selectedTypes: [
"convenience_store"
],
allTypes: [
"accounting",
"airport",
"amusement_park",
"aquarium",
"art_gallery",
"atm",
"bakery",
"bank",
"bar",
"beauty_salon",
"bicycle_store",
"book_store",
"bowling_alley",
"bus_station",
"cafe",
"campground",
"car_dealer",
"car_rental",
"car_repair",
"car_wash",
"casino",
"cemetery",
"church",
"city_hall",
"clothing_store",
"convenience_store",
"courthouse",
"dentist",
"department_store",
"doctor",
"electrician",
"electronics_store",
"embassy",
"establishment",
"finance",
"fire_station",
"florist",
"food",
"funeral_home",
"furniture_store",
"gas_station",
"general_contractor",
"grocery_or_supermarket",
"gym",
"hair_care",
"hardware_store",
"health",
"hindu_temple",
"home_goods_store",
"hospital",
"insurance_agency",
"jewelry_store",
"laundry",
"lawyer",
"library",
"liquor_store",
"local_government_office",
"locksmith",
"lodging",
"meal_delivery",
"meal_takeaway",
"mosque",
"movie_rental",
"movie_theater",
"moving_company",
"museum",
"night_club",
"painter",
"park",
"parking",
"pet_store",
"pharmacy",
"physiotherapist",
"place_of_worship",
"plumber",
"police",
"post_office",
"real_estate_agency",
"restaurant",
"roofing_contractor",
"rv_park",
"school",
"shoe_store",
"shopping_mall",
"spa",
"stadium",
"storage",
"store",
"subway_station",
"synagogue",
"taxi_stand",
"train_station",
"travel_agency",
"university",
"veterinary_care",
"zoo"
]
});
storelocator.controller('HomeController', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.data = dataService;
console.log('Home ctrl', $scope.data.locationDone);
$scope.fn = {};
$scope.fn.showOne = function () {
$scope.data.option = 3;
$location.path('/map');
};
$scope.fn.showAll = function () {
$scope.data.option = 99;
$location.path('/map');
};
}]);
storelocator.controller('MapsController', ['$rootScope', '$scope', '$location', 'varTypes',
function ($rootScope, $scope, $location, varTypes) {
//If the information required to access places API is not available then redirect to home
if (!(($rootScope.hasOwnProperty('which')) && ($rootScope.hasOwnProperty('position')))) {
console.log('redirecting', $rootScope.hasOwnProperty('which'), ' ', $rootScope.hasOwnProperty('position'));
$location.path('/home');
return;
}
for (var i = varTypes.selectedTypes.length - 1; i >= 0; i--) {
if (varTypes.allTypes.indexOf(varTypes.selectedTypes[i]) == -1) {
varTypes.selectedTypes.splice(i, 1);
}
}
var infowindow = new google.maps.InfoWindow();
var currLoc = new google.maps.LatLng($rootScope.position.coords.latitude, $rootScope.position.coords.longitude);
var mapOptions = {
zoom: 15,
center: currLoc
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var latLngBounds = new google.maps.LatLngBounds();
var latLngs = [];
var thisResults = null;
var request = {
location: currLoc,
types: varTypes.selectedTypes,
rankBy: google.maps.places.RankBy.DISTANCE
};
var placeService = new google.maps.places.PlacesService(map);
placeService.nearbySearch(request, callback);
function callback(results, status, pagination) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
thisResults = results;
initialize();
}
}
//Creates markers and add event listener to show the info window
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: placeLoc
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent("<p>" + place.name + "<br>" +
place.vicinity + "</p>");
infowindow.open(map, this);
});
}
function initialize() {
mapOptions = {
zoom: 14,
center: latLngBounds.getCenter()
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i = 0; i < thisResults.length && i < $rootScope.which; i++) {
var place = thisResults[i];
latLngs.push(place.geometry.location);
latLngBounds.extend(place.geometry.location);
createMarker(thisResults[i]);
}
map.fitBounds(latLngBounds);
}
//adding listener to handle mobile rotation
google.maps.event.addDomListener(window, 'resize', function () {
console.log('event caught');
initialize();
});
}]);
<div layout="column" layout-align="start center">
<div layout="column" layout-margin layout-padding>
<div flex layout layout-margin layout-padding>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==0">
<span flex>Awaiting location information.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==2"><span flex>Error in getting location.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==3"><span flex>The browser does not support location.</span>
</md-whiteframe>
</div>
<md-button flex ng-show="data.locationDone==1" class="md-accent md-default-theme md-raised" ng-click="fn.showOne()">Find Nearest Three Stores</md-button>
<div flex></div>
<md-button ng-show="data.locationDone==1" flex class="md-accent md-default-theme md-raised" ng-click="fn.showAll()">Find All Stores</md-button>
</div>
</div>
<div flex id="map-canvas">
</div>