A set of google location services for AngularJS
Blog post: http://varun.ca/locator
Source: https://github.com/winkerVSbecks/locator
A Pen by Varun Vachhar on CodePen.
<body ng-app="locatorDemo" ng-controller="MainCtrl"> | |
<nav> | |
<h1> | |
Locator <small>a set of google location services for AngularJS</small> | |
</h1><!-- | |
--><a class="github" href="https://github.com/winkerVSbecks/locator">github</a><!-- | |
--><a class="post post-link" target="_blank" href="http://varun.ca/locator">blogpost</a> | |
</nav> | |
<small class="tag-line">A set of google location services for AngularJS. For more details check out my <a class="post" target="_blank" href="http://varun.ca/locator">blogpost</a>. | |
</small> | |
<div class="column black flex-item"> | |
<h2>Location Lookup <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/powered-by-google-on-non-white@2x.png" width="104px"></h2> | |
<location-lookup ng-model="lookedUpLocation" limit-to="4"></location-lookup> | |
</div> | |
<div class="column blue flex-item"> | |
<h2>Location Picker <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/powered-by-google-on-non-white@2x.png" width="104px"></h2> | |
<location-picker ng-model="pickedLocation" limit-to="5"></location-picker> | |
</div> | |
<div ng-class="{ false: 'modal', true: 'modal--show' }[isModalVisible]"> | |
<div class="overlay" ng-click="toggleModal()"></div> | |
<div class="modal__contents modal--transition"> | |
<a class="modal__close" href="" ng-click="toggleModal()">×</a> | |
<h3 ng-if="pickedLocation">Picked Location</h3> | |
<p ng-if="pickedLocation">Name: <span class="muted">{{pickedLocation.name}}</span><br/>Description: <span class="muted">{{pickedLocation.description}}</span><br/>Latitude: <span class="muted">{{pickedLocation.latitude}}</span><br/>Longitude: <span class="muted">{{pickedLocation.longitude}}</span></p> | |
<br/> | |
<br/> | |
<h3 ng-if="lookedUpLocation">Looked Up Location</h3> | |
<p ng-if="lookedUpLocation">Name: <span class="muted">{{lookedUpLocation.name}}</span><br/>Description: <span class="muted">{{lookedUpLocation.description}}</span><br/>Latitude: <span class="muted">{{lookedUpLocation.latitude}}</span><br/>Longitude: <span class="muted">{{lookedUpLocation.longitude}}</span></p> | |
</div> | |
</div> | |
</body> |
A set of google location services for AngularJS
Blog post: http://varun.ca/locator
Source: https://github.com/winkerVSbecks/locator
A Pen by Varun Vachhar on CodePen.
angular.module('locatorDemo', [ | |
'locator' | |
]) | |
.controller('MainCtrl', ['$scope', 'location', function ($scope, location) { | |
location.get(angular.noop, angular.noop); | |
$scope.isModalVisible = false; | |
$scope.toggleModal = function() { | |
$scope.isModalVisible = !$scope.isModalVisible; | |
}; | |
$scope.$watch('pickedLocation', $scope.toggleModal); | |
$scope.$watch('lookedUpLocation', $scope.toggleModal); | |
}]); |
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900); | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html, body { | |
width: 100%; | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
font-family: 'Lato', sans-serif; | |
} | |
a:hover, | |
a:active { color: #000; text-decoration: none; } | |
nav { padding: 0 24px; } | |
nav h1 { | |
line-height: 120px; | |
display: inline-block; | |
width: 80%; | |
margin: 0; | |
float: left; | |
} | |
nav small, | |
.tag-line { color: #bdc3c7; font-size: 16px; } | |
.tag-line { display: none; padding: 24px; } | |
.github { | |
display: inline-block; | |
font-weight: bold; | |
line-height: 120px; | |
text-align: right; | |
width: 10%; | |
color: #95A5A6; | |
float: left; | |
font-size: 16px; | |
text-decoration: none; | |
vertical-align: bottom; | |
} | |
.post-link { | |
display: inline-block; | |
font-weight: bold; | |
line-height: 120px; | |
text-align: right; | |
width: 10%; | |
color: #95A5A6; | |
float: left; | |
font-size: 16px; | |
text-decoration: none; | |
vertical-align: bottom; | |
} | |
.post { | |
color: #95A5A6; | |
font-weight: bolder; | |
text-decoration: none; | |
} | |
.post:hover, | |
.post:active { | |
color: #000; | |
} | |
h2 { | |
margin: 0; | |
line-height: 120px; | |
padding: 0 24px; | |
} | |
.column { | |
width: 50%; | |
position: absolute; | |
top: 120px; | |
bottom: 0; | |
display: inline-block; | |
float: left; | |
color: #fff; | |
} | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
ul li { | |
padding: 0 24px; | |
line-height: 60px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
cursor: pointer; | |
} | |
.blue { background-color: #00B4FF; left: 50%; } | |
.blue h2, | |
.blue ul li { background-color: #00B4FF; border-bottom: 1px solid #0090CC; } | |
.black { background-color: #515151; left: 0; } | |
.black h2, | |
.black ul li { background-color: #515151; border-bottom: 1px solid #444444; } | |
input { | |
border: none; | |
font-size: 16px; | |
border-bottom: 1px solid #444444; | |
padding: 20px 24px; | |
line-height: 20px; | |
outline: none; | |
color: #fff; | |
margin: 0; | |
display: block; | |
width: 100%; | |
background-color: #444; | |
} | |
h3 { font-weight: bolder; font-weight: 900; } | |
.muted { color: #BDC3C7; } | |
@media (max-width : 48rem) { | |
nav small { display: none; } | |
nav h1, .github { line-height: 80px; } | |
.github { width: 20%; } | |
.tag-line { display: block; } | |
.post-link { display: none; } | |
.column { | |
position: relative; | |
display: block; | |
float: left; | |
width: 100%; | |
top: auto; | |
} | |
.black, | |
.blue { left: auto; } | |
} | |
/************************************************ | |
Modal By @clintonhalpin | |
http://codepen.io/clintonhalpin/pen/cgbmk | |
/*************************************************/ | |
.overlay { | |
background: rgba(0,0,0,.5); | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
.modal { | |
visibility: hidden; | |
} | |
.modal__contents { | |
background: white; | |
width: 32rem; | |
position: fixed; | |
left: 50%; | |
margin-left: -16rem; | |
top: 6rem; | |
min-height: 32rem; | |
padding: 48px; | |
} | |
.modal__close { | |
position: fixed; | |
right: 2rem; | |
top: 2rem; | |
padding: 10px; | |
text-decoration: none; | |
font-weight: bolder; | |
} | |
.modal--show { | |
visibility: visible; | |
} | |
.modal--transition { | |
-webkit-transform: scale(0.7); | |
-moz-transform: scale(0.7); | |
-ms-transform: scale(0.7); | |
transform: scale(0.7); | |
opacity: 0; | |
-webkit-transition: all 0.3s; | |
-moz-transition: all 0.3s; | |
transition: all 0.3s; | |
} | |
.modal--show .modal--transition { | |
-webkit-transform: scale(1); | |
-moz-transform: scale(1); | |
-ms-transform: scale(1); | |
transform: scale(1); | |
opacity: 1; | |
} | |
@media (max-width : 48rem) { | |
.modal__contents { | |
top: 0; | |
left: 0; | |
bottom: 0; | |
width: 100%; | |
margin: 0; | |
} | |
.modal--transition { | |
-webkit-transform: translateX(-0) translateY(150%); | |
-moz-transform: translateX(-0) translateY(150%); | |
-ms-transform: translateX(-0) translateY(150%); | |
transform: translateX(-0) translateY(150%); | |
} | |
} |