InfoWindow and button of detail

@salam1993 wrote:

Hi , Please I nead help , I m working on a map application , I set markers and InfoWindow and in every infowWindow I put a boutton of details that should open a new view wthere we can find more detail about every marker , but here when I click I get the same view and the same informations ( i used firebase to place markers and informations) . and this is the code
map.html:

<map center="{{myPosition[0].lat}},{{myPosition[0].lon}}"
zoom="2" disable-default-u-i="true">

         <marker  ng-repeat="marker in markers" position="{{marker.lat}},{{marker.lon}}" clickable="true" on-mousedown="showPositionDetail(event,marker)" icon="img/{{marker.avancement}}.png"> </marker>





         <info-window id="marker-info" max-width="200" style="background-color: linen;">
        <div ng-non-bindable="" >
        <div class="contents">
        <h4  style="color:blue; text-align: center;">{{marker.name}}</h4 >
        <p class="address" >
        <i class="ion ion-ios-location" style="color:blue;"></i >
         {{marker.address}}
        </p >
        <p class="phone" >
        <i class="ion ion-ios-telephone" style="color:blue;" ></i >
         {{marker.phone}}
        </p >


        <p class="avancement" >
         <i class="ion ion-clock" style="color:blue;" ></i >
         Avanacement : {{marker.avancement }}
        </p >



        <a class="tab-item"  href="#/detail" >
            <i class="button icon-right ion-chevron-right button-positive"  style="border-radius: 12px; float: left;"> More detail</i>
        </a>
    </div>

        </div >
        </div >
        </info-window >


    </map>


</ion-content>

detail.html

    </div>

    <div  class="content" "></div>

Check mail

Call Ma

Record album

Grammy

Friends
0



Adresse :

{{marker.address}}

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app=angular.module('starter', ['ionic','ngMap','ngCordova','starter.services'])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('map', {
        url: '/',
        templateUrl: 'templates/map.html',
        controller: 'MapCtrl'
    });

      $stateProvider.state('detail', {

    url: '/detail',

    templateUrl: 'templates/detail.html',
    controller:  'MapCtrl'
});

    $urlRouterProvider.otherwise("/");
})

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});

});

app.controller('MapCtrl',function($scope, $state,
$cordovaGeolocation,Markers,NgMap) {

NgMap.getMap().then(function(map) {
$scope.map = map;
});
$scope.showPositionDetail = function(event,marker){
$scope.marker = marker;
$scope.map.showInfoWindow.apply(this, [event, 'marker-info']);
};

var options = {timeout: 10000, enableHighAccuracy:
    true};

// $scope.myPosition = [{
// 'lat':32.25,
// 'lon':-8.43
// },
// {
// 'lat':31.50,
// 'lon':-8.20
// },
// {
// 'lat':33.10,
// 'lon':-8.13
// }

//];


$scope.markers = Markers.getAllMarkers();





ionic.Platform.ready(function () {
    $cordovaGeolocation.getCurrentPosition(options).then(function (position){
        $scope.myPosition.lat = position.coords.latitude;
        $scope.myPosition.lon =
            position.coords.longitude;
    }, function(error){
        console.log("Could not get location");
    });
});

});

markerservices.js

angular.module('starter.services', ['firebase'])
.factory("Markers", function($firebaseArray) {
var refMarkers = new Firebase("https://ucdmap1.firebaseio.com/markers");
var markers = [];
return { getAllMarkers: function() {
markers = $firebaseArray(refMarkers);

return markers;

}
}
});

Posts: 1

Participants: 1

Read full topic