How to use Google Maps on Ionic to load multiple locations

Question

How to use Google Maps on Ionic to load multiple locations

Navigation

#1 by (0 votes)

3

I am using Ionic 1.3 and creating a Map screen, this screen will have a menu to select the specific destinations and another that is the maps with the location.

Example of the destination choice screen:

Controller:

var mapasJson = {
  "Foo": {
    "0": {
      "titulo": "local 1",
      "coordenadas": "001,002"
    },
    "1": {
      "titulo": "local 2",
      "coordenadas": "001,002"
    }
  }
};

app.controller('mapasItemsCtrl', ['$scope', '$stateParams', function ($scope, $stateParams, $http) {
    $scope.destinos = mapasJson;
}]);

Template:

<div class="item item-divider">
  Foo
</div>
<div class="item item-button-right item-text-wrap" ng-repeat="d in destinos.Foo">
  {{d.titulo}}
  <a class="button button-positive" href="">
    <i class="icon ion-ios-navigate-outline"></i>
  </a>
</div>

Result:

Myquestionis,howdoIgetthecoordinatesforthe<a>tagtowhenIclickonittocallthemapscreenandthengotothelocation?

Here'samapdemo: link

javascript angularjs ionic

asked by anonymous 03.08.2016 / 21:30

1 answer

Android Studio Error "Unable to locate adb" [closed] Can I access database using electron js? [closed]

score 0 · Answer 1

You can pass as parameter to the controller of the page that contains the map using the ui-sref directive.

Ex:

<div class="item item-button-right item-text-wrap" ng-repeat="d in destinos.Foo">
  {{d.titulo}}
  <a class="button button-positive" ui-sref="mapa({latitude: d.latitude, longitude: d.longitude})">
    <i class="icon ion-ios-navigate-outline"></i>
  </a>
</div>

And recover it with $ stateParams.

app.controller('MapaCtrl', function($scope, $stateParams) {
   var latitude = $stateParams.latitude;
}