Google map select

1

Hi, I need a map with ionic charge, so a serious view:

There should be an input selector with 3 unique options, each option has a direction I need to load into the map whenever they are changed.

.controller('rutasRecomendadasCtrl', ['$scope','$ionicPlatform', '$location',
function($scope, $ionicPlatform, $location) {
$scope.whoiswhere = [];
$scope.basel = { lat: 47.55633987116614, lon: 7.576619513223015 };
$ionicPlatform.ready(function() { navigator.geolocation.getCurrentPosition(function(position) {
    $scope.position=position;
    var c = position.coords;
    $scope.gotoLocation(c.latitude, c.longitude);
    $scope.$apply();
    },function(e) { console.log("Error retrieving position " + e.code + " " + e.message) });
    $scope.gotoLocation = function (lat, lon) {
      if ($scope.lat != lat || $scope.lon != lon) {
          $scope.basel = { lat: lat, lon: lon };
          if (!$scope.$$phase) $scope.$apply("basel");
    }
  };

    // some points of interest to show on the map
    // to be user as markers, objects should have "lat", "lon", and "name" properties
    $scope.whoiswhere = [
        { "name": "My Marker", "lat": $scope.basel.lat, "lon": $scope.basel.lon },
    ];
  });}])

This is the form

<script id="rutas_recomendadas.html" type="text/ng-template">
  <ion-view title="Rutas recomendadas" left-buttons="leftButtons">
    <ion-content>
          <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="Nombres">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Apellidos">
        </label>
        <label class="item item-input item-select">
          <div class="input-label">
            Genero
          </div>
          <select>
            <option selected> Masculino</option>
            <option>Femenino</option>
          </select>
        </label>
        <button class="button button-block button-positive">
          Buscar
        </button>
      </div>
      <app-map style="height:200px;margin:12px;box-shadow:0 3px 25px black;"center="basel"zoom="15"markers="whoiswhere"> 
      </app-map>       
    </ion-content>
  </ion-view>
</script>

This code will give you the coordinates to the map, but I need to create 3 static choices. As I can do?