Map Controller - Cordova Watch App
.factory('Location', function() { | |
var position = { | |
lat: '', | |
lng: '' | |
}; | |
var get = function(){ | |
return position; | |
} | |
var save = function(latitude, longitude){ | |
position = { | |
lat: latitude, | |
lng: longitude | |
}; | |
console.log(position); | |
} | |
return { | |
get: get, | |
save: save | |
}; | |
}) | |
.controller('mapCtrl', function($scope, $ionicPlatform, $state, Location) { | |
$scope.ifValidAddress = false; | |
$scope.disableTap = function(){ | |
container = document.getElementsByClassName('pac-container'); | |
angular.element(container).attr('data-tap-disabled', 'true'); | |
angular.element(container).on("click", function(){ | |
document.getElementById('search-place').blur(); | |
}); | |
}; | |
$scope.openCompass = function(){ | |
$state.go('compass'); | |
}; | |
$scope.initWatchGlance = function(){ | |
var payload = { | |
'label2': {'value': 'Table with a colors. ' + new Date(), 'color': '#FFFFFF'}, | |
'table': { // don't add selectable rows to a glance since glances are read-only | |
'rows': [ | |
{ | |
'type': 'OneColumnRowType', // available types are specified in ObjC | |
'group': { | |
'backgroundColor': '#1884C4', | |
'cornerRadius': 8 | |
}, | |
'label': {'value': ' images!'}, // unlike HTML, multiple spaces have effect | |
'imageLeft': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30}, | |
'imageRight': {'src': 'www/img/ionic.png', 'width': 25, 'height': 30} | |
}, | |
{ | |
'type': 'OneColumnRowType', | |
'group': { | |
'backgroundColor': '#7884C4', | |
'cornerRadius': 8 | |
}, | |
'label': {'value': '2nd row, no img'} | |
} | |
] | |
} | |
}; | |
applewatch.loadGlance(payload); | |
console.log('loading first glance'); | |
}; | |
$scope.mapWatchGlance = function(){ | |
$scope.location = Location.get(); | |
var payload = { | |
'label': { | |
'value': "Kettle's Locator", | |
'color': '#FFFFFF', | |
'font': { | |
'size': 12 | |
} | |
}, | |
'label2': { | |
'value': "We have a new location. @" + new Date(), | |
'color': '#FFFFFF', | |
'font': { | |
'size': 10 | |
} | |
}, | |
'map': { | |
'center': { | |
// Amersfoort, The Netherlands | |
'lat': $scope.location.lat, | |
'lng': $scope.location.lng | |
}, | |
'zoom': 2, // 0.001 is streetlevel, 4 fits the entire Netherlands | |
'annotations': [ // up to 5 annotations (custom pins), any more are ignored (play with the zoom value to make them all fit) | |
{ | |
'pinColor': 'green', // green | red | purple | |
'lat': $scope.location.lat, | |
'lng': $scope.location.lng | |
} | |
] | |
} | |
}; | |
applewatch.loadGlance(payload); | |
console.log('loading map glance'); | |
}; | |
document.addEventListener('deviceready', function(){ | |
console.log('device ready'); | |
// Apple Watch load Glance | |
applewatch.callback.onLoadGlanceRequest = $scope.initWatchGlance(); | |
//applewatch.callback.onLoadAppDetailRequest = $scope.initWatchAppPage(); | |
console.log('end device ready'); | |
}, false); | |
$ionicPlatform.ready(function() { | |
/* | |
applewatch.callback.onError = function (message) { | |
console.log("Error: " + message); | |
}; | |
*/ | |
var map = new google.maps.Map(document.getElementById('map'), { | |
center: {lat: -33.8688, lng: 151.2195}, | |
zoom: 13, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}); | |
// Create the search box and link it to the UI element. | |
var input = document.getElementById('search-place'); | |
var searchBox = new google.maps.places.SearchBox(input); | |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); | |
// Bias the SearchBox results towards current map's viewport. | |
map.addListener('bounds_changed', function() { | |
searchBox.setBounds(map.getBounds()); | |
}); | |
var markers = []; | |
// Listen for the event fired when the user selects a prediction and retrieve | |
// more details for that place. | |
searchBox.addListener('places_changed', function() { | |
var places = searchBox.getPlaces(); | |
if (places.length == 0) { | |
$scope.ifValidAddress = false; | |
$scope.$apply(); | |
console.log($scope.ifValidAddress); | |
return; | |
} | |
$scope.ifValidAddress = true; | |
$scope.$apply(); | |
console.log($scope.ifValidAddress); | |
// Clear out the old markers. | |
markers.forEach(function(marker) { | |
marker.setMap(null); | |
}); | |
markers = []; | |
// For each place, get the icon, name and location. | |
var bounds = new google.maps.LatLngBounds(); | |
places.forEach(function(place) { | |
Location.save(place.geometry.location.lat(), place.geometry.location.lng()); | |
$scope.mapWatchGlance(); | |
var icon = { | |
url: place.icon, | |
size: new google.maps.Size(71, 71), | |
origin: new google.maps.Point(0, 0), | |
anchor: new google.maps.Point(17, 34), | |
scaledSize: new google.maps.Size(25, 25) | |
}; | |
// Create a marker for each place. | |
markers.push(new google.maps.Marker({ | |
map: map, | |
icon: icon, | |
title: place.name, | |
position: place.geometry.location | |
})); | |
if (place.geometry.viewport) { | |
// Only geocodes have viewport. | |
bounds.union(place.geometry.viewport); | |
} else { | |
bounds.extend(place.geometry.location); | |
} | |
}); | |
map.fitBounds(bounds); | |
}); | |
}); | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment