I am trying to add a Google Maps application to give the user the directions from his/her current location to a particular fixed static point on the map. So far I have created a controller and the related HTML. However, for some reason when I am testing this out I am not getting the map, but rather an error in the console ""
This is my controller:
'use strict';
angular.module('main')
.controller('LocationCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
google.maps.event.addDomListener(window, 'load');
var myLatlng = new google.maps.LatLng(43.07493, -89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$scope.map = map;
}
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
loadScript('http://www.google.com.mt/jsapi');
loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');
$scope.centerOnMe = function() {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting location',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-pane>
<ion-header-bar class="bar-dark">
<button ui-sref="main" class="button button-icon icon ion-navicon"></button>
<h1 class="title">Directions</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-pane>Can someone tell me what I am doing wrong? Also, can some one give me some tips on how to give the user the directions to this static point when the user clicks on the Find Me link in the footer? (Something along these lines but the end point is fixed and the start point would be the location of the user when he clicks on the Find Me button - https://developers.google.com/maps/documentation/javascript/examples/directions-panel)
I am new to AngularJS and am not sure if my code is correct. Also, I am not using jQuery as a dependency.
