読者です 読者をやめる 読者になる 読者になる

【Cordova】Google Maps API

 

①以下のプラグインをインストール

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

 

②クライアントの実装(HTML)

(以下のようにしないとnew google.maps.LatLngでエラーになります)

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>

 

③クライアントの実装(JS)

if(!navigator.geolocation){
 //GEOに対応しているか確認

 rerturn;
}
var options = {
 enableHighAccuracy: true, //高精度な位置(スマホではGPSを利用)
 timeout: 10000,                  //タイムアウト[ms]
 maximumAge: 5000          //最後の取得が[ms]以内であればその情報を再利用
};
navigator.geolocation.getCurrentPosition(this.onSuccess, this.onError, options);

 

onSuccess: function(position) { 

     var latlng = new google.maps.LatLng(position.coords.latitude,
                                                                 position.coords.longitude);

     var options = {

  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 // 地図を取得+マーカーを設定
 var map = new google.maps.Map(document.getElementById("mapCanvas"), options);
 new google.maps.Marker({
   position: latlng,
   map: map
 });
};
onError: function(error) {
  var errorMessage = {
    0: "原因不明エラー" ,
    1: "取得不可(許可されていない)" ,
    2: "取得不可(電波状況などで)",
    3: "タイムアウト",
  };
  alert(errorMessage[error.code]);
);