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

2014年8月1日 2014年8月1日

mikaduki

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

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

INDEX

地図を出す

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("ジオロケーションサポートしてないある。");
  },
});