カテゴリー
SugiBlog Webデザイナー・プログラマーのためのお役立ちTips

GoogleMapで面積計測（v3）

GoogleMapを利用し、図形を描画して囲った部分の面積を求めることができます。
ネットで探しましたが、バージョン3で組まれたものが見当たらなかったので書いておきます。

計測にはというジオメトリライブラリのユーティリティ関数（google.maps.geometry.spherical）を使用します。

コードはGoogleMapオブジェクト（map）は既に作成済のものとして書いています。
ついでに、距離も計測できるようにしています。
ご参考になれば幸いです。

ちなみに、某メーカーの住宅地図ソフトでの面積計測と精度は変わりませんでした。

GoogleMapAPI version 3.21

PolygonOptionsクラス

var myPolygonOptions = {
    clickable: false,       // クリックイベントの有効/無効
    fillColor: "#ffffff",   // 塗り潰し色
    fillOpacity: 0.6,       // 塗り潰しの不透明度（0.0-1.0）
    map: map,               // GoogleMapのインスタンス
    paths: new Array(),     // 座標の配列
    strokeColor: "#000000", // 線の色
    strokeOpacity: 0.8,     // 線の不透明度（0.0-1.0）
    strokeWeight: 3         // 線の太さ（ピクセル）
}

続きを読む…»

,
4,198 views

ページのトップへスクロールする

現在のページのトップへスクロールする小技です。
jQueryを使って実装します。

JavaScriptライブラリをダウンロード
jQuery

まずheadタグ内でjQueryライブラリを読み込みます。

<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>

bodyタグにIDを付けます

<body id="top">

ID付のdivタグで括ってリンクを作成します。

<div id="to_pagetop">
    <a href="#top">上に戻る</a>
</div>

最後に任意の場所に以下のコードを記述します。 続きを読む…»

, ,
1,250 views

jQueryプラグイン Excolo-Slider

Excolo-Sliderはシンプルなスライドショーを実装してくれるプラグインです。
シンプルではありますが、オプションも多様に用意されていて、スマホのタッチ操作にも対応しているので
非常に使い勝手が良いです。

JavaScriptライブラリをダウンロード
jQuery
Excolo-Slider

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./excolo-slider/js/jquery.excoloSlider.js"></script>
<link rel="stylesheet" href="./excolo-slider/css/jquery.excoloSlider.css">

HTMLを用意します。

<div id="eslider" class="slider">
    <a href="#"><img src="./images/example1.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example2.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example3.gif" width="260" height="100" alt=""></a>
    <img src="./images/example4.gif" width="260" height="100" alt="">
</div>

続きを読む…»

, ,
1,700 views

jQueryプラグイン Masonry

「Masonry」とはJavaScriptグリッドレイアウトライブラリです。
高さの違う要素を、パネルを敷き詰めるようにレイアウトしてくれるというものです。

ウィンドウのサイズが変われば、アニメーションしながら並び替えという動作も行ってくるので、
レスポンシブWEBデザインとしても利用できます。

JavaScriptライブラリをダウンロード
jQuery
jQuery masonry

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./masonry.pkgd.min.js"></script>

続きを読む…»

, ,
1,830 views

GoogleMap ルート検索

GoogleのGoogleMap APIを使ってルート検索をすることができます。

まず、ルート検索のプロパティを指定します。

// Route Request Property
var request = {
    origin: null,            // 出発地点のLatLngオブジェクト
    destination: null,       // 到着地点のLatLngオブジェクト
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    avoidHighways: true, // true に設定すると、高速道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
    avoidTolls: true     // true に設定すると、有料道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
};

トラベルモードについては

DRIVING=自動車
BICYCLING=自転車
TRANSIT=電車
WALKING=徒歩

出発地点と到着地点を設定します。

request.origin      = new google.maps.LatLng(34.73307796637832, 135.49859046936035);  //新大阪駅
request.destination = new google.maps.LatLng(35.681003987351055, 139.76703643798828); //東京駅

DirectionsServiceのインスタンスを生成

var directionsService = new google.maps.DirectionsService();

ルート表示のオブジェクトを作成し、プロパティを設定します。 続きを読む…»

,
5,825 views