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!