How to Auto Fill my current address to a search box - google-maps

Question

Greeting, I'm new to IONIC and now i have met a problem. I'm trying to include a google map direction services in my application. The application now will jump to the location A once i input the address in the search box, but what i want is when i 1st open the app, search box A will automatically get my location address and fill the address in the textbox A.
TaxiServices.html
<div class="bar bar-header bar-dark item item-button-left">
<!--<a class="button icon-left ion-chevron-left button-clear button-dark" ng-click="st.link()">Home Page</a>-->
<button class="button button-clear" ng-click="ts.link()">
<i class="icon ion-arrow-left-c"></i>
</button>
<h1 class="title">Taxi Services TEST</h1>
</div>
<ion-view ng-app="taxiservice" ng-controller="MapController">
<ion-content class="has-footer has-header" scroll="false">
<div class="container">
<div class="titlebar">
<div class="preorder">
<!--http://jsfiddle.net/ucmL2/-->
<ion-checkbox ng-model="ModelData.Animals">Pre-Order</ion-checkbox>
<div class="form-group" ng-show="ModelData.Animals">
<form action="action_page.php">
Date & Time :
<input type="datetime-local" class="datetime">
</form>
</div>
</div>
<div class="places">
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location">
<input id="destination-input" class="controls" type="text"
placeholder="Enter a destination location">
</div>
</div>
<div id="map" data-tap-disabled="true"></div>
<div class="fare has-footer">
<h3>Estimated Fare: </h3>
</div>
</div>
taxiservice-ctrl.js
var map;
(function () {
'use strict';
angular
.module('taxiservice.ctrl', [])
.controller('TaxiServiceCtrl', ['$scope', '$ionicPopup', '$timeout', '$rootScope', '$interval', '$window', '$ionicLoading',
function ($scope, $ionicPopup, $timeout,$rootScope, $interval, $window, $ionicLoading) {
//variables
var self = this;
self.link = link;
function link() {
$window.location.href = "../../js/ServiceMenu/index.html";
}
$scope.showPopup = function() {
var alertPopup = $ionicPopup.alert({
title: 'Good News!',
template: 'Yay! We have found you a driver!'
});
alertPopup.then(function(res) {
$window.location.href = "../../js/TaxiFound/index.html";
});
};
}])
.controller('MapController', function ($scope, $ionicLoading) {
google.maps.event.addDomListener(window, 'load', function () {
var origin_place_id = null;
var destination_place_id = null;
var travel_mode = google.maps.TravelMode.WALKING;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
center: {lat: -33.8688, lng: 151.2195},
zoom: 17
});
navigator.geolocation.getCurrentPosition(function (pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
var origin_input = document.getElementById('origin-input');
var destination_input = document.getElementById('destination-input');
var options = {
types: ['geocode'],
componentRestrictions: {country: 'my'}
};
map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
var origin_autocomplete = new google.maps.places.Autocomplete(origin_input, options);
origin_autocomplete.bindTo('bounds', map);
var destination_autocomplete =
new google.maps.places.Autocomplete(destination_input, options);
destination_autocomplete.bindTo('bounds', map);
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function expandViewportToFitPlace(map, place) {
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
}
origin_autocomplete.addListener('place_changed', function() {
var place = origin_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
origin_place_id = place.place_id;
route(origin_place_id, destination_place_id, travel_mode,
directionsService, directionsDisplay);
});
destination_autocomplete.addListener('place_changed', function() {
var place = destination_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
destination_place_id = place.place_id;
route(origin_place_id, destination_place_id, travel_mode,
directionsService, directionsDisplay);
});
function route(origin_place_id, destination_place_id, travel_mode,
directionsService, directionsDisplay) {
if (!origin_place_id || !destination_place_id) {
return;
}
directionsService.route({
origin: {'placeId': origin_place_id},
destination: {'placeId': destination_place_id},
travelMode: travel_mode
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
});
});
})();
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">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
<title></title>
<link href="../../css/ionic.app.css" rel="stylesheet">
<script src="../../lib/angular/angular.js"></script>
<script src="../../lib/angular-animate/angular-animate.js"></script>
<script src="../../lib/angular-sanitize/angular-sanitize.js"></script>
<script src="../../lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../../lib/ionic/js/ionic.js"></script>
<script src="../../lib/ionic/js/ionic-angular.js"></script>
</head>
<body ng-app="taxiservice">
<ion-nav-view>
</ion-nav-view>
<script src="https://maps.googleapis.com/maps/api/js?&callback=&libraries=places&sensor=false">
</script>
<script src="app.js"></script>
<script src="map.js"></script>
<script src="content/taxiservice-ctrl.js"></script>
</body>
</html>
app.js
var app = angular
.module('taxiservice', [
'ionic',
'taxiservice.ctrl'
])
.run(function($ionicPlatform,$timeout) {
$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();
}
});
})
.config(function($ionicConfigProvider,$stateProvider,$urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'content/TaxiService.html',
controller:'TaxiServiceCtrl as ts'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app');
});
I have struggled with this problem very long times, please help!

Answer 1

Look the reverse geocoding example here. You can retrieve the address by using the position which you already have and then add the marker. https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/geocoder

Answer 2

A good plugin i use on my app for fill Google Maps Autocomplete is
https://github.com/israelidanny/ion-google-place
Easy to install , reverse geocoding included , Great Template
the customization is easy
Good Luck