メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【GoogleMAP】 gmaps.jsで入門してみる

gmapps1

いつかはクラウン、いつかは独立
そして、いつかはグーグルマップと思ってる人も多いと思います。
僕はそう思ってたんですが、たまたまawesomeなLibraryを見つけたので入門しました。
ライブラリーの名前はgmaps.jsといいます。

今回はこれを使って、
住所を2つ入力してルートを出すっていうプログラム作りました。

地図を出す

Divを書いてidをmapにします。

<br />
map = new GMaps({<br />
   div: '#map',<br />
   zoom: 18,<br />
   lat: 35.1814464,<br />
   lng: 136.90639799999997,<br />
});</p>
<p>&lt;div id=&quot;map&quot; style=&quot;width:100%;height:80%&quot;&gt;&lt;/div&gt;<br />

こんな感じで設定すれば、latとlngと一致する場所が表示されます。
ピンをたてたいなら

</p>
<p>map.addMarker({<br />
   lat: 35.1814464,<br />
   lng: 136.90639799999997, //こっから下は無しでもいいです。ナシにする場合,取らないとエラー<br />
  title: 'aaaa',<br />
  click: function(e) {<br />
    alert('hongege'); //クリックした時に行う動作をコールバック関数で指定ができます。<br />
  }<br />
});</p>
<p>

こうやって追加で書きます。

現在地を表示する

サイト開いた人の座標を取得し、表示を行うプログラムです。

結果は下記3通りのコールバック関数で受け取ります。
受け取った先でプログラム書いたりできます。
この場合、成功時に座標情報を書き換えているんだと思います。

success:は成功時
error:は失敗
not_supported:は未対応とかそんなんです。

</p>
<p>map = new GMaps({<br />
   div: '#map',<br />
   zoom: 18,<br />
   lat: 35.1814464,<br />
   lng: 136.90639799999997<br />
});</p>
<p>GMaps.geolocate({<br />
  success: function(position) {<br />
    map.setCenter(position.coords.latitude, position.coords.longitude);<br />
  },<br />
  error: function(error) {<br />
    alert('エラーしてるよ '+error.message);<br />
  },<br />
  not_supported: function() {<br />
    alert(&quot;ジオロケーションサポートしてないで。&quot;);<br />
  },<br />
});</p>
<p>

ここでmap.addMarkerと組み合わせるとこんな感じになります。

</p>
<p>map = new GMaps({<br />
   div: '#map',<br />
   zoom: 18,<br />
   lat: 35.1814464,<br />
   lng: 136.90639799999997<br />
});</p>
<p>GMaps.geolocate({<br />
  success: function(position) {<br />
    map.setCenter(position.coords.latitude, position.coords.longitude);</p>
<p>    map.addMarker({<br />
        lat: position.coords.latitude,<br />
        lng: position.coords.longitude,<br />
        title:&quot;場所&quot;,<br />
            infoWindow: {<br />
              content: '&lt;p style=&quot;width:200px&quot;&gt;現在地&lt;/p&gt;'<br />
            }<br />
    });</p>
<p>  },<br />
  error: function(error) {<br />
    alert('エラーしてるよ '+error.message);<br />
  },<br />
  not_supported: function() {<br />
    alert(&quot;ジオロケーションサポートしてないある。&quot;);<br />
  },<br />
});</p>
<p>

決定地点から目的地点へマーカーを引く

ためしに1個プログラム作ってみました。
地点AからBへの道案内と、道筋を線で表すプログラムです。

プログラムの流れ

  • フォームAとBを入力
  • 入力内容から座標取得
  • 座標取得後に案内ボタンを押す
  • A-Bの道筋を表示

すんごいざっくりな説明ですが、こんな感じになります。

動いてるソースとかはこれになります。

ちなみに公式サイトにはかなり強力なリファレンスがあるので、
これがあれば、誰でも簡単に地図アプリが作れちゃうかもしれませんね。

gmaps.js公式ページ
gmaps.js公式サンプル集

関連記事

コメントをお待ちしております