WordPress短期学習プログラム
JavaScript

Javascript

Geolocation APIを使ってスマホで位置情報取得

iphoneやAndroidのGPSを利用して位置情報を取得したい場合、

getCurrentPositionで簡単に取得できます。

 

使い方はと言うと、

navigator.geolocation.getCurrentPosition(callbackOk, callbackError);

とするだけ。

 

callbackOkは位置情報の取得成功時に呼び出されるコールバック関数、
callbackErrorはエラー時に呼び出されるコールバック関数です。

※コールバック関数名は任意です。

 

あとは、

位置情報の取得に成功していれば、

緯度・経度をそれぞれ「position.coords.longitude」・「position.coords.latitude」へ入れてくれます。

 

ということで、

勉強がてらGoogleMap Ver3と絡めた簡単なプログラムを組んでみました。

 

↓こんな感じです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<title></title>
<!-- Google Map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- Google Map -->
<style>
#canvas{
width:310px;
height:263px;
margin:0 auto;
padding:0px;
text-align:center;
}
</style>

<script>
//ユーザーの現在の位置情報を取得
/*
* callbackOk:位置情報取得成功時のコールバック関数
* callbackError:位置情報取得失敗時のコールバック関数
*/
navigator.geolocation.getCurrentPosition(callbackOk, callbackError);

//位置情報の取得に成功した場合
function callbackOk(position){

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

 var opts = {
  zoom: 12,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 var map = new google.maps.Map(document.getElementById("canvas"), opts);

 //マーカー 指定の座標に設置
 var marker = new google.maps.Marker({position: latlng, map: map});

}

//位置情報の取得に失敗した場合
function callbackError(error){

 var error_message = "";

 switch(error.code){

 case 1:
  error_message = "位置情報の取得が許可されていません。";
  break;

 case 2:
  error_message = "端末の位置情報が利用できません。";
  break;

 case 3:
  error_message = "タイムアウトしました。";
  break;

 }

document.getElementById("canvas").innerHTML = error_message;

}

</script>

</head>
<body>
<article id="conts">
<div id="canvas"></div>
</article>
</body>
</html>

こんな感じで位置情報を取得して地図表示は可能です。

 

Google Mapについては今回は説明しないので、↓こちらを参考にしてください。
[ Google Maps API Ver.3 で地図を表示 ]

 

 

あと、

Geolocation APIについてはこの辺のサイトなんかを参考にすると良いと思います。

http://gihyo.jp/dev/feature/01/location-based-services/0003

 

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

  2. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

  3. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

  4. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  5. JavaScript

    Javascript

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

  6. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

最近の記事

  1. SEO(エスイーオー)
  2. WordPressプラグイン「Anti-spam」
  3. システムエラー
  4. PHP(ピー・エイチ・ピー)
  5. SONY 広角レンズ「SEL1018」
  6. PHP(ピー・エイチ・ピー)
  7. 俺流塩ラーメン
  8. SEO(エスイーオー)
  9. Linux(リナックス)
  10. Linux(リナックス)
PAGE TOP