はまったのでメモ。
HTMLでフォームをリセットする場合、下記のような方法でリセットできます。
<input type="reset" value="リセット" />
それをjQueryで行ってみようとすると、単純にこう書いちゃいます・・・
$('#form').reset();
だが、しか〜し!!
動かない・・・
$('#form').submit();
これは正常に動くのに・・・
解決策
$('#form')[0].reset();
これでフォームをリセットできます。
はて？はて？
jQueryを覚えるなら
 | 新品価格 |
前回に引き続き、Google Map APIについて。
今回は、UI関係です。
デフォルトのコントロールセットを表示させない。
1. <script>
2. $(document).ready( function(){
3. var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
4. var map = new google.maps.Map(
5. document.getElementById('map'),
6. {
7. zoom: 14,
8. center: latlng,
9. mapTypeId: google.maps.MapTypeId.ROADMAP,
10. disableDefaultUI: true
11. }
12. );
13. var marker = new google.maps.Marker({
14. position: latlng,
15. map: map,
16. title: '天橋立'
17. });
18. });
19. </script>
10行目
disableDefaultUIをtrueにするとデフォルトで表示されるコントロールセットを表示しない。
コントロールの表示を個別で指定することも出来ます。
1. <script>
2. $(document).ready( function(){
3. var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
4. var map = new google.maps.Map(
5. document.getElementById('map'),
6. {
7. zoom: 14,
8. center: latlng,
9. mapTypeId: google.maps.MapTypeId.ROADMAP,
10. panControl: true,
11. zoomControl: true,
12. mapTypeControl: true,
13. mapTypeControlOptions: {
14. style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
15. position: google.maps.ControlPosition.TOP_RIGHT
16. },
17. scaleControl: true,
18. streetViewControl: true,
19. rotateControl: true,
20. overviewMapControl: true
21. }
22. );
23. var marker = new google.maps.Marker({
24. position: latlng,
25. map: map,
26. title: '天橋立'
27. });
28. });
29. </script>
10〜20行目
コントロールの表示/非表示を個別に設定するには、以下のプロパティで設定できます。
設定できる値はtrue（表示する）、false（表示しない）です。
・panControl
移動コントロールを有効または無効のいずれかを指定します。
・zoomControl
ズームコントロールを有効または無効のいずれかを指定します。
・mapTypeControl
マップタイプ（地図や航空写真など）を切り替えるマップタイプコントロールを有効または無効のいずれかを指定します。
・scaleControl
簡単な地図縮尺を表示するスケールコントロールを有効または無効のいずれかを指定します。
・streetViewControl
ストリートビューを有効または無効にするペグマンを、表示または非表示のいずれかを指定します。
・rotateControl
45度画像の向きをコントロールする回転コントロールの表示を有効または無効のいずれかを指定します。
デフォルトではこのコントロールの表示は、現在表示されているズームと場所での指定されたマップタイプに45度画像があるかどうかで決まります。
・overviewMapControl
概観マップを有効または無効のいずれかを指定します。
概観マップコントロールは、完全に表示（サムネイル概観マップを表示）するか、折りたたんで最小化した状態で表示することができます。
また、13〜16行目のようにコントローラーのスタイルや表示位置なども指定出来ます。
Google Map APIを覚えるなら
 | 新品価格 |
前回に引き続き、Google Map APIについて。
今回は、マーカーを置いてみます。
1. <script>
2. $(document).ready( function(){
3. var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
4. var map = new google.maps.Map(
5. document.getElementById('map'),
6. {
7. zoom: 14,
8. center: latlng,
9. mapTypeId: google.maps.MapTypeId.ROADMAP
10. }
11. );
12. var marker = new google.maps.Marker({
13. position: latlng,
14. map: map,
15. title: '天橋立'
16. });
17. });
18. </script>
12〜16行目
markerという変数に以下のオプションを設定したマーカーを生成します。
・positionは、マーカーを表示させる位置を座標で指定します。この指定は必須です。
・mapは、どの地図にマーカーを表示させるか指定します。この指定も必須です。
・titleは、マーカーにロールオーバーした時に出るツールチップ用テキストを指定します。
その他のマーカーのオプション
・animation
マーカーにアニメーションを指定します。
アニメーションには、上から落ちてくる「DROP」、ピョンピョン弾む「BOUNCE」があります。
BOUNCE
・draggable
マーカーをドラッグできる（true）かできない（false）かを指定します。
ドラッグできない（良く意味がわかんない・・・）
Google Map APIを覚えるなら
| 新品価格 |
GoogleMapの埋め込みタグでは物足りなくなってきまして・・・
GoogleMap API V3を使ってみました。
まずはAPIを読み込みます。
1. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
たったこれだけ・・・もうAPIキーを発行して・・・そして・・・みたいな面倒は要りません！
sensor=の所はGPSなどの位置情報取得センサーをtrue（使用する）かfalse（使用しない）のどちらかを指定します。
表示したいGoogleマップの詳細設定。
1. <script>
2. $(document).ready( function(){
3. var latlng = new google.maps.LatLng( 35.570075, 135.191917 );
4. var map = new google.maps.Map(
5. document.getElementById('map'),
6. {
7. zoom: 14,
8. center: latlng,
9. mapTypeId: google.maps.MapTypeId.ROADMAP
10. }
11. );
12. });
13. </script>
２行目：
DOM構築完了のタイミングで処理を行う用意をします。
３行目：
latlngという変数に表示したい座標の値を代入します。
( 35.570075, 135.191917 ) は（緯度, 経度）を表します。
※Latlngは、Lat＝latitude（緯度）、Lng＝longitude（経度）のこと。
※指定した座標は京都府の天橋立の座標です。
４〜11行目
mapという変数に以下のオプションを設定した地図を生成し、５行目で指定したタグのIDに表示します。
・zoomは、デフォルトのズームレベル（表示倍率）の指定。
ズームレベルは数値が大きくなるほど拡大、小さくなるほど縮小。
・centerは、表示枠内の中心点をどの座標にするかの指定。
今回の例では、latlngに代入しておいた座標を指定しています。
・mapTypeIdは、初期の表示タイプの指定。
ROADMAP（市街地図）
SATELLITE（衛星写真や航空写真）
HYBRID（衛星写真/航空写真と道路地図のハイブリッド）
TERRAIN（地形や樹木などの地形的特徴を持つ地図）
と、簡単なGoogle Mapはこんな感じで表示できます。
Google Map APIを覚えるなら
| 新品価格 |