Currently, I am attempting to transfer the latitude and longitude of a location from one HTML file to another using the $routeParams feature.
In the second HTML file, I utilized the Google Maps directions API to display the directions from the source latitude and longitude to the destination latitude and longitude.
While the Google Maps API worked perfectly without the $routeParams, it encountered issues when I incorporated $routeParams into the code.
The following error message was displayed when $routeParams was used:
Error: jquery.min.js:5 GET net::ERR_ABORTED
Shown below is an excerpt of my code:
<a href="#/tracktruck/17.418611/78.519708/17.424653/78.64478"><button class="btn col-xs-6 btn btn-primary" style="color:white;width:48%;margin-top: 20px">track truck</button></a>
Javascript Code:
.when('/tracktruck/:srcfrmlat/:srcfrmlag/:srctolat/:srctolag', {
templateUrl: 'tracktruck.html',
controller: 'tracktruckController'
})
Controller:
app.controller('tracktruckController', ['$scope', '$http','$routeParams',function ($scope, $http,$routeParams) {
var initMap = function() {
//Code for map functionality
}
initMap();
}]);
Tracktruck HTML File:
<div id="map" style=" height: 400px;width: 100%;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAandyF_iZi1pAlTiiFKlLb4CKxjmSLDJA&callback= initMap"></script>
If anyone has any insights or solutions, I would greatly appreciate your assistance. Thank you!