Adding Google Maps to AngularJS & Ionic App

Question

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.

score 2 · Answer 1 · answered Apr 24 '15 at 23:31

2

Try integrating with Angular Google Maps http://angular-ui.github.io/angular-google-maps/#!/

It's much easier to use and has good documentation.

answered Apr 24 '15 at 23:31

Joon Lee

332
1
6

score 1 · Accepted Answer · answered Apr 23 '15 at 20:30

1

The initialize function is not defined in the global context.

setting $window.initialize = initialize worked for me

also added some css, but i guess you already have them

working fiddle

hope this helps

answered Apr 23 '15 at 20:30

shakib

5,449
2
30
39

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

Replace google.maps.event.addDomListener(window, 'load', initialize); with ionic.Platform.ready(initialize);. Similar quesiton.

edited May 23 '17 at 10:26

Community

1
1

answered Apr 23 '15 at 22:56

Kay_N

987
5
12

Adding Google Maps to AngularJS & Ionic App

3 Answers3