Implement geolocation plugin in app


#1

hallo there,

i am trying to implement a geolocation plugin in my app but i cannot see my error.

Specifically this one

i have created the map.html

 <ion-view ng-controller="MapController">
 <ion-content class="padding center-hor">
 <div id="map_canvas"></div>
 </ion-content>
 </ion-view>

the app.js

var FBURL = "https://crackling-fire-2339.firebaseio.com/";

 angular.module('starter', [
 'ionic', 
 'firebase',
 'ngCordova',
 'starter.controllers-user',
 'starter.controllers-followers',
 'starter.controllers-follower-detail',
 'starter.services-auth',
 'starter.services-profile',
 'starter.services-followers',
 'starter.services-codes',
 'starter.services-utils',
 'starter.services-cordova-camera'])

 .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);
  cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}
// hide the splash screen only after everything's ready (avoid flicker)
// requires keyboard plugin and confix.xml entry telling the splash screen to stay until explicitly told
if(navigator.splashscreen){
  navigator.splashscreen.hide();
  }
  });
  })

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'UserCtrl'
})

.state('app.dash', {
  url: '/dash',
  views: {
    'menuContent': {
      templateUrl: 'templates/dash.html'
    }
  }
})
.state('app.followers', {
  url: '/followers',
  views: {
    'menuContent': {
      templateUrl: 'templates/followers/followers.html',
      controller: 'FollowersCtrl'
    }
   }
  })

.state('app.map', {
   url: '/map',
  views: {
   'menuContent': {
    templateUrl: 'templates/map.html',
    controller: 'mapCtrl'
   }
  }
 })

.state('app.follower', {
  url: '/followers/:fid',
  views: {
    'menuContent': {
      templateUrl: 'templates/followers/follower-detail.html',
      controller: 'FollowerDetailCtrl'
    }
  }
});
 
$urlRouterProvider.otherwise('/app/dash');

});

and the map.js

angular.module('starter.mapCtrl',[])


// Getting the map selector in DOM
var div = document.getElementById("map_canvas");

// Invoking Map using Google Map SDK v2 by dubcanada
var map = plugin.google.maps.Map.getMap(div,{
    'camera': {
        'latLng': setPosition(-19.9178713, -43.9603117),
        'zoom': 10
    }
});

// Capturing event when Map load are ready.
map.addEventListener(plugin.google.maps.event.MAP_READY, function(){

    // Defining markers for demo
    var markers = [{
        position: setPosition(-19.9178713, -43.9603117),
        title: "Marker 1"
    }, {
        position: setPosition(-19.8363826, -43.9787167),
        title: "Marker 2"
    }];

    // Bind markers
    for (var i = 0; i < markers.length; i++) {
        map.addMarker({
            'marker': markers[i],
            'position': markers[i].position
        }, function(marker) {

            // Defining event for each marker
            marker.on("click", function() {
                alert(marker.get('marker').title);
            });

        });
    }
});

// Function that return a LatLng Object to Map
function setPosition(lat, lng) {
    return new plugin.google.maps.LatLng(lat, lng);
}

and the menu.html

<ion-side-menus enable-menu-with-back-views="false">
<ion-nav-bar class="bar-energized">
  <ion-nav-back-button>
  </ion-nav-back-button>

    <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
   </ion-nav-buttons>
  </ion-nav-bar>

<ion-nav-view name="menuContent"></ion-nav-view>

</ion-side-menu-content>

<ion-side-menu side="left">


 <ion-header-bar class="bar-dark">
  <h1 class="title">Left</h1>
 </ion-header-bar>

<ion-content style="background: #444">
  <ion-list>
    
    
    <ion-item menu-close href="#/app/dash" class="item-dark item-icon-left">
      <i class="icon ion-home"></i>
      Home
    </ion-item>
    
    <ion-item menu-close ng-click="openProfile()" class="item-dark item-icon-left">
      <i class="icon ion-person"></i>
      Profile
    </ion-item>

    <ion-item menu-close href="#/app/followers" class="item-dark item-icon-left">
      <i class="icon ion-planet"></i>
      Following
    </ion-item>
    
     <ion-item menu-close href="#/app/map" class="item-dark item-icon-left">
      <i class="icon ion-planet"></i>
      map
    </ion-item>
    
  </ion-list>
  </ion-content>
</ion-side-menu>

i cannot figure it out…
please help!

thank you!