Categories
SugiBlog ホームページ制作・システム開発

jQueryプラグイン Slider Pro

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

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

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

764 views

GoogleMaps API 標高の取得

GoogleMapのGoogle Maps Elevation APIを使用して標高を取得することができます。
利用にはAPIキーが必須です。詳しくは、[GoogleMap ブラウザAPIキーの取得]を参照してください。

座標オブジェクトを作成します。

var location = new google.maps.LatLng(35.7100627, 139.8085064);

リクエストパラメータを作成します。
座標オブジェウトを配列にします。

var request = { locations: new Array(location) };

ElevationServiceクラスのインスタンスを作成します。

var myElevation = new google.maps.ElevationService();

getElevationForLocationsメソッドを使って標高を取得します。

myElevation.getElevationForLocations(request, function(response, status) {

    if(status == google.maps.ElevationStatus.OK) {

        alert(response[0].elevation + "m");

    } else {

        alert("取得できませんでした。");

    }

});

公式リファレンス:Google Maps Elevation API
https://developers.google.com/maps/documentation/elevation/intro?hl=ja

196 views

GoogleMap ブラウザAPIキーの取得

現時点ではまだAPIキーがなくても表示されますが、APIキーの利用が必須となったようです。
今回はGoogleMapを利用するためのAPIキーの取得方法をご紹介します。

まずはウェブ向け Google Maps APIにアクセス。
「キーを取得」をクリックします。
001

APIキー取得までの説明が表示されますので、「続ける」をクリックしてください。
002

Googleのログインが必要ですので、促されたタイミングでログインしてください。
続きを読む…»

133 views

GoogleMapに円を描くJavaScript

GoogleMap上に円を描く方法をご紹介します。

CircleOptionsクラス

var myCircleOptions = {
    center: null,           // 中心の座標
    clickable: true,        // クリックの可否(デフォルトtrue)
    draggable: false,       // ドラッグの可否(デフォルトfalse)
    editable: false,        // 編集の可否(デフォルトfalse)
    fillColor: "#ffffff",   // 塗り潰しの色
    fillOpacity: 0.7,       // 塗り潰しの不透明度 0.0~1.0
    map: map,               // GoogleMapのインスタンス
    radius: 0,              // 半径(単位:m)
    strokeColor: "#6090ff", // 線の色
    strokeOpacity: 0.9,     // 線の不透明度 0.0~1.0
    strokePosition: 
        google.maps.StrokePosition.CENTER, // 線の位置(CENTER|INSIDE|OUTSIDE)
    strokeWeight: 3,        // 線の太さ(単位:ピクセル)
    visible: true,          // 表示の有無(デフォルトtrue)
    zIndex: 1               // 重なり順
}

設定したオプションを利用してサークルオブジェクトを作成します。

myCircle = new google.maps.Circle(myCircleOptions);

マップを後から設定する場合は

myCircle.setMap(map);

公式リファレンスはこちらから
https://developers.google.com/maps/documentation/javascript/reference#Circle

213 views

Google StreetView Image API

Googleストリートビューを静的な画像として表示する方法をご紹介します。
GoogleStaticMapのようにimgタグを使って表示することが可能です。

形式

<img src="https://maps.googleapis.com/maps/api/streetview?[パラメーター]" alt="">

パラメーター

location 緯度経度
size 表示する画像のサイズ
※最大640×640
heading カメラの方位(0~360) 0=北
pitch カメラのアングル(90~-90) 90=上 -90=下
fov カメラの水平視野(0~120) 0=狭い 120=広い
zoom カメラのズーム(0~5) 0=遠い 5=近い
key APIキー

API Keyの使用が推奨されているようです。
API KeyはGoogle Developer ConsoleでStreet View Image APIを有効にすると使用できるようになります。
続きを読む…»

515 views