Mobile Application _Map

e2

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;">
</script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>

<body ng-app="starter">
<ion-pane ng-controller="MapController">
<ion-header-bar class="bar-positive">
<h1 class="title">Super Where I am</h1>
</ion-header-bar>
<ion-content scroll="false">
<!-- Google Maps -->
<div id="map"></div>
</ion-content>
<ion-footer-bar class="bar-positive">
<div class="buttons" ng-click="locate()">
<button class="button button-clear icon ion-android-locate"></button>
</div>
</ion-footer-bar>
</ion-pane>
</body>
</html>

-----------------------------

App.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// include ngCordova
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
// $cordovaGeolocation
// $ionicLoading
.controller('MapController', ['$scope', '$cordovaGeolocation', '$ionicLoading', function($scope, $cordovaGeolocation, $ionicLoading) {

var myLocation = new google.maps.LatLng(13.8626634,100.5536497);

var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLocation,
zoom: 15
});
console.log(map)
$scope.map = map;
$scope.locate = function() {
var posOptions = {
timeout: 10000,
enableHighAccuracy: true
};
$ionicLoading.show();
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function(position) {
$ionicLoading.hide();
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert("Got position: " + lat + ", " + lng);
var myLocation = new google.maps.LatLng(lat, lng);
var DhewestLocation = new google.maps.LatLng(13.771695,100.504908);
var PanitLocation = new google.maps.LatLng(13.7628271,100.5120319);
var MyHome = new google.maps.LatLng(13.8626634,100.5536497);

var map = new google.maps.Map(document.getElementById('map'),
{
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLocation,
zoom: 15
});
var marker = new google.maps.Marker({
map: map,
label :'USA',
position: myLocation
});

marker = new google.maps.Marker({
map: map,
label :'T',
position: DhewestLocation
});
marker = new google.maps.Marker({
map: map,
label :'P',
position: PanitLocation
});
marker = new google.maps.Marker({
map: map,
label :'H',
position: MyHome
});

}, function(err) {

$ionicLoading.hide();

if (error.code == PositionError.PERMISSION_DENIED) {
alert("Permission denied. check setting");
} else if (error.code == PositionError.POSITION_UNAVAILABLE) {
alert("Cannot get position. May be problem with network or can't get a satellite fix.");
} else if (error.code == PositionError.TIMEOUT) {
alert("Geolocation is timed out.");
} else {
alert(error.message);
}
});
}
}])

Bookmark the permalink.

Comments are closed.