カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

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);

例１）「zoom_changed」イベントを追加します。

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

例２）「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,723 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,753 views

正規表現の注意点

  • PHP
  • 2015-04-17 - 更新:2015-09-29

キャラクタークラス（[]）を使用する場合、[]内ではエスケープが無効化されます。
※言語の種類等によってエスケープが有効なものもあるようです。
その中で特殊な意味を持つ記号を通常のキャラクターとしてクラスに含めたいときは
記述する位置に注意する必要があります。
例えば「]」、「^」、「-」等です。

^ [の直後以外
] [の直後
– リストの最後

参考URL: http://www.kt.rim.or.jp/~kbk/regex/regex.html

, , ,
1,412 views

現在のURLを取得 JavaScript

JavaScriptで、現在表示しているページのURLを取得します。

document.write(window.location.protocol + "//" + window.location.host + window.location.pathname + "<br>\n");
document.write(window.location.protocol + "//" + window.location.hostname + window.location.pathname + "<br>\n");
document.write(document.URL);

出力結果

http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
http://www.sankikensetsu.co.jp/test.html
1,299 views

iOSでのフォームラベル

  • HTML
  • 2014-06-12 - 更新:2014-08-19

iOSではHTMLタグ<label>が認識されないようです。

フォームのラベルはユーザーにとって当たり前というほど役に立ちます。
ですが、PCやAndroidではラベルのクリックイベントが認識されるのに、iOSでは認識されません。

そこで、ラベル付けに一工夫することで解決することができます。

例えば、チェックボックスを例にしてやってみましょう。

<label onclick=""><input type="checkbox" name="test" value="1">チェック1</label>

または

<input type="checkbox" id="t2" value="2">
<label for="t2" onclick="">チェック2</label>

空のクリックイベントを入れているところがミソです。

そして<head>内に、以下のJavaScriptを記述します。

document.getElementByTagName("label").click(function(){});

これでiOSでもラベルのクリックイベントが認識されるようになります。

参考URL:
http://blog.bluearrowslab.com/smartphone/topicks/55/

,
1,487 views