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

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を有効にすると使用できるようになります。
続きを読む…»

3,022 views

jQuery スライドショー slick.js

レスポンシブに対応した多機能プラグイン「slick.js」のご紹介です。

slick.js

http://kenwheeler.github.io/slick/

個人的には、思ったようにしようとすると少しコツがいるな、という感じでした。

まずはjQueryとslick.js本体を読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.5.7/slick/slick.min.js"></script>

次にCSSを読み込み

<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>

スライドさせたい画像等のコンテンツをbodyタグ内に記述します。

<ul class="your-class">
    <li>
        コンテンツ1
    </li>
    <li>
        コンテンツ2
    </li>
</ul>

続きを読む…»

24,265 views

GoogleMap イベントリスナーの追加と削除

GoogleMap API v3でのイベントの追加と削除について

GMapインスタンスを生成

var myOptions = {
    center: new google.maps.LatLng(35, 135),
    zoom: 12
};

var map = new google.maps.Map(document.getElementById("map"), myOptions);

例1)「zoom_changed」イベントを追加します。

google.maps.event.addListener(map, "zoom_changed", function(){ });

例2)「click」イベントを追加します。

google.maps.event.addListener(map, "click", function(e){ });

指定したイベントリスナーを削除する

google.maps.event.clearListeners(map, "zoom_changed");

全てのイベントリスナーを削除する

google.maps.event.clearInstanceListeners(map);

リスナーをオブジェクトとして作成し、そのインスタンスを指定してリスナーを削除する

var zoomChanged_listener = google.maps.event.addListener(map, "zoom_changed", function(){ 

});

google.maps.event.removeListener(zoomChanged_listener);

イベントの種類については下記をご参照ください。
[GoogleMap v3のmapオブジェクトのイベント]


2016年10月31日追記

GoogleMapの読み込み完了時に一度だけ実行するイベントを追加

google.maps.event.addListenerOnce(map, "idle", function(){ });

リサイズの場合はトリガーを使用します。

// divリサイズ時mapイベント
google.maps.event.addListener(map, "resize", function(LatLng)
{
    map.setCenter(LatLng, 10);
});

// divリサイズ時mapイベントのトリガー
document.getElementById("map").onresize = function()
{
    var LatLng = map.getCenter();
    google.maps.event.trigger(map, "resize", LatLng);
}
6,483 views

複数のマーカーを地図内に全て表示させるには

GoogleMap(v3)にて、複数追加したマーカーが
全て表示されるように位置と拡大比率を自動調整する機能があります。

以下のメソッドを使います。
google.maps.Map::fitBounds(bounds:LatLngBounds)

マップオブジェクトを生成します。

var map = new google.maps.Map(document.getElementById("map"));

表示領域を生成します。

var bounds = new google.maps.LatLngBounds();

表示領域にマーカーの位置を追加

bounds.extend(new google.maps.LatLng(35.705506, 139.752048)); //東京ドーム
bounds.extend(new google.maps.LatLng(35.633232, 139.882006)); //東京ディズニーランド
bounds.extend(new google.maps.LatLng(35.710349, 139.811346)); //東京スカイツリー

表示領域を地図に反映させます。

map.fitBounds (bounds);
4,634 views

リンクでGoogleMap地図アプリを起動する

リンクを貼って指定した場所をGoogleMapの地図アプリで表示させることができます。
スマートフォン対応サイトや、メールで正確な場所を送りたいときに便利です。

メールで送る場合はURL部分だけでOKです。

※与える座標は世界測地系(WGS84)です。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551">地図を表示</a>

上記だと座標が名称として表示されるので、任意に名称を指定したい場合は以下のようにします。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551+東京タワー">地図を

表示</a>
14,095 views