ionic google maps

Google maps kullanarak sabit bir adrese , bulunduğumuz yerden yol tarifini göstereceğiz.

index.html de head etiketi içerisine tum scriptlerin altına aşağıdaki scripti yazalım:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>


map.html sayfasına aşağıdakileri yazalım:

 <ion-row>
 <ion-item >
  <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate find_class">Yolu    Göster</a>
</ion-item>
</ion-row>

 <ion-row>
      <ion-content>
      <div id="map" data-tap-disabled="true"></div>
</ion-content>
  </ion-row>


MapCtrl.controller:


.controller('MymapCtrl',function($scope, $stateParams,$ionicLoading, $compile){
        $scope.$root.x=0;
        $scope.$root.y=0;

      function initialize() {
         var site = new google.maps.LatLng($scope.$root.x, $scope.$root.y);
        var avm = new google.maps.LatLng(41.3300962,36.291600);
     
        var mapOptions = {
          streetViewControl:true,
          center: avm,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
       
     
        var marker = new google.maps.Marker({
          position: site,
          map: map,
          title: 'Siz'
        });
       
        var avmRoute = new google.maps.Marker({
          position: avm,
          map: map,
          title: 'YeşilYurt Avm'
        });
       
        var infowindow = new google.maps.InfoWindow({
             content:"Siz"
        });

        infowindow.open(map,marker);
       
        var avmwindow = new google.maps.InfoWindow({
             content:"YeşilYurt Avm"
        });

        avmwindow.open(map,avmRoute);
     
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        $scope.map = map;
       
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var request = {
            origin : site,
            destination : avm,
            travelMode : google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        directionsDisplay.setMap(map);
     
      }
 
      google.maps.event.addDomListener(window, 'load', initialize);
   
      $scope.centerOnMe = function() {
        if(!$scope.map) {
          return;
        }

        navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.$root.x=pos.coords.latitude;
          $scope.$root.y=pos.coords.longitude;
          $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
          initialize();
        }, function(error) {
          alert('Unable to get location: ' + error.message);
        });
      };
       
})


Çalıştırıp bakalım: