How to use Google Maps in Ionic to upload multiple locations

Question

I’m using Ionic 1.3 and creating a Maps screen, this screen will feature a menu to select the specific destinations and another that is the maps with the location.

Example of destination selection 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>

Upshot:

Hence my question is, how do I pass the coordinates to the tag <a> when click on it call the map screen and then yes go to the location?

Here’s a demo of the maps: https://codepen.io/ionic/pen/uzngt

Answer 1

You can pass as parameter to the page controller 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 get him back with the $stateParams.

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