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

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

地図を出す

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

map = new GMaps({
   div: '#map',
   zoom: 18,
   lat: 35.1814464,
   lng: 136.90639799999997,
});

<div id="map" style="width:100%;height:80%"></div>

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

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

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

現在地を表示する

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

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

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

map = new GMaps({
   div: '#map',
   zoom: 18,
   lat: 35.1814464,
   lng: 136.90639799999997
});

GMaps.geolocate({
  success: function(position) {
    map.setCenter(position.coords.latitude, position.coords.longitude);
  },
  error: function(error) {
    alert('エラーしてるよ '+error.message);
  },
  not_supported: function() {
    alert("ジオロケーションサポートしてないで。");
  },
});

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

map = new GMaps({
   div: '#map',
   zoom: 18,
   lat: 35.1814464,
   lng: 136.90639799999997
});

GMaps.geolocate({
  success: function(position) {
    map.setCenter(position.coords.latitude, position.coords.longitude);

    map.addMarker({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
        title:"場所",
            infoWindow: {
              content: '<p style="width:200px">現在地</p>'
            }       
    });

  },
  error: function(error) {
    alert('エラーしてるよ '+error.message);
  },
  not_supported: function() {
    alert("ジオロケーションサポートしてないある。");
  },
});

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

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

プログラムの流れ

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

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

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

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

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