How to get location with google static maps in İonic Framework

For get location in ionic you should open location in your  device. Then write the following code ;

1-in cmd write this code and download cordova geolocation plugin

-cordova plugin add cordova-plugin-geolocation


2-in app.js write this code

.controller(‘MapController’, function($scope, $cordovaGeolocation, $ionicLoading) {

ionic.Platform.ready(function(){
$ionicLoading.show({
template: ‘<ion-spinner icon=”bubbles”></ion-spinner><br/>Locasyon alınıyor!’
});

var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {

var lat = position.coords.latitude;
var long = position.coords.longitude;
$scope.mapImage = “http://maps.googleapis.com/maps/api/staticmap?center=” + lat + “,” + long + “&zoom=16&scale=false&size=500×500&maptype=roadmap&format=png&visual_refresh=true&markers=color:green%7Clabel:S%7C” + lat + “,” + long + “”;
alert(“enlem=”+lat+”?boylam=”+long);

$ionicLoading.hide();

}, function(err) {
$ionicLoading.hide();
console.log(err);
});
})
});

3- for show the map in html page create an html page and write following code ;

<ion-view view-title=”Location”>

<ion-pane>
<ion-content ng-controller=”MapController”>

<img ng-src=”{{mapImage}}” style=”transition: -webkit-transform 0.25s ease; -webkit-transform: scale(2); ” />

<div id=”map” data-tap-disabled=”true”></div>
</ion-content>
</ion-pane>

</ion-view>

4-And finally for show the map write this code in your style.css

#map {
height: 100%;
width: 100%;
}

if you have any problem or another information just write comments.

Figen Önün Kâşif on 4 Ocak 2016 yazdı
Yorum Ekle
  • 0 Yanıt(lar)
  • Yanıtınız

    Cevabınızı göndererek Gizlilik Politikası ve Hizmet Şartlarını kabul ediyorsunuz.