入力された施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる

2015年03月08日

-

カテゴリー：: javascript

先日、電車の座席に座っていた時、乗ってきたおばあさんに席を譲ろうとしたところ、かたくなに拒否され恥をかいたという話はどうでもいいんですが、久々の更新になります。

今回は、グーグルマップのAPIを使い施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる手法をご紹介いたします。

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

1	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

まず、グーグルマップのAPIを読み込みます。
本来はAPIキーを指定しないといけないんですが、指定しなくても一応は動きます。

次にHTMLの記述です。

<div id="search_form">
	<input id="geo_search_text" type="text" name="text" size="40" value="" />
	<input onclick="geo_search_map();" type="button" name="button" value="検索" />
</div>
<div id="map" style="width: 500px; height: 500px;"></div>

1

2

3

4

5

</div>

ID:search_formで囲っているのが、施設名や住所を入力するためのテキストフィールドと検索をする際に押す検索ボタンです。
ID:mapはグーグルマップを表示するためのボックスです。

最後にjavascriptの記述です。

<script type="text/javascript">
var map = false;
var marker = false;
var gc = new google.maps.Geocoder();
var address_str = "東京"; // 初期表示位置

window.onload = function() {
	map = new google.maps.Map(
				document.getElementById("map"),{
					zoom : 15,
					center : new google.maps.LatLng(0,0),
					mapTypeId : google.maps.MapTypeId.ROADMAP
				}
			);

	// ジオコーディング
	gc.geocode({ address : address_str }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);

			var pos = map.getCenter();
			var lat = pos.lat();
			var lng = pos.lng();

			// マーカーを立てる
			marker = new google.maps.Marker({
				position: new google.maps.LatLng(lat, lng),
				map: map
			});

		} else {
			alert("情報の取得に失敗しました");
		}
	});
}

function geo_search_map() {
	address_str = document.getElementById("geo_search_text").value;
	gc.geocode({ address : address_str }, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);

			var pos = map.getCenter();
			var lat = pos.lat();
			var lng = pos.lng();

			marker.setPosition(new google.maps.LatLng(lat, lng));

		} else {
			alert("情報の取得に失敗しました");
		}
	});
}
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

var map = false;

var marker = false;

var gc = new google.maps.Geocoder();

var address_str = "東京"; // 初期表示位置

window.onload = function() {

map = new google.maps.Map(

document.getElementById("map"),{

zoom : 15,

center : new google.maps.LatLng(0,0),

mapTypeId : google.maps.MapTypeId.ROADMAP

}

);

// ジオコーディング

gc.geocode({ address : address_str }, function(results, status) {

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

map.setCenter(results[0].geometry.location);

var pos = map.getCenter();

var lat = pos.lat();

var lng = pos.lng();

// マーカーを立てる

marker = new google.maps.Marker({

position: new google.maps.LatLng(lat, lng),

map: map

});

} else {

alert("情報の取得に失敗しました");

}

});

}

function geo_search_map() {

address_str = document.getElementById("geo_search_text").value;

gc.geocode({ address : address_str }, function(results, status) {

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

map.setCenter(results[0].geometry.location);

var pos = map.getCenter();

var lat = pos.lat();

var lng = pos.lng();

marker.setPosition(new google.maps.LatLng(lat, lng));

} else {

alert("情報の取得に失敗しました");

}

});

}

</script>

window.onloadでページのロードが完了した際に、地図の初期化を実行しています。

「map = new google.maps.Map～略～」でID:mapに地図を表示します。
「gc.geocode({ address : address_str }, function(results, status) {～略～」では、変数「address_str」に代入されている文字を元に経度緯度情報を取得しています。
「map.setCenter(results[0].geometry.location);」では、取得した経度緯度情報が地図の中心になるように移動させています。
「marker = new google.maps.Marker({～略～」で地図にマーカーをセットしています。マーカーの座標は、地図の中心座標（取得した経度緯度情報）です。

geo_search_map()は、検索ボタンが押された際に実行される関数ですが、処理の内容はテキストフィールドから文字を取得する以外は、上記で説明したものと同じ内容になっています。

サンプルはこちら

jqueryを使ってフォームに入力された文字数をチェックする

2014年12月06日

-

カテゴリー：: javascript

以前、仕事で簡易的に作ったのですが、テキストフィールドとかに入力された文字数のチェックをして、何文字入力されたかを表示し、制限以上の文字数が入力されれば、なんらかの警告を出すといった処理の作り方をご紹介いたします。
※html側でjqueryを読み込んでいるのが前提です。

まず、HTMLを以下のように記述します。

<div class="form_item">
	<input name="text01" class="count_check" type="text" />
	<p class="note">※50文字以内（<span class="count">0</span>/<span class="limit">50</span>）</p>
</div>

1

2

3

4

</div>

inputタグ、もしくはtextaraタグにクラス「count_check」を設定し、その下にクラス「note」を設定したタグ（divなどでOK）を用意し、その中にクラス「count」、クラス「limit」を設定したタグを用意します。
クラス「count」内に現在何文字入力されているかを表示するので、初期値として0(半角数字)を入力します。
クラス「limit」内の数字(半角数字)は何文字まで入力できるのかをチェックするための数字を入力します。

上記のサンプルコードでは50文字以内の文字入力が許容範囲になります。

次に、javascriptです。

$(function() {

	$('.count_check').bind('keydown keyup keypress change',function(){
		var input_count = $(this).val().length;
		var limit = $(this).next(".note").find(".limit").text();
		
		$(this).next(".note").find(".count").html(input_count);
		
		if( input_count > limit ) {
			// 文字制限を超過した場合の処理
			$(this).next(".note").find(".count").css("color","#c00").css("font-weight","bold");
		} else {
			$(this).next(".note").find(".count").css("color","").css("font-weight","");
		}
	});

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$(function() {

$('.count_check').bind('keydown keyup keypress change',function(){

var input_count = $(this).val().length;

var limit = $(this).next(".note").find(".limit").text();

$(this).next(".note").find(".count").html(input_count);

if( input_count > limit ) {

// 文字制限を超過した場合の処理

$(this).next(".note").find(".count").css("color","#c00").css("font-weight","bold");

} else {

$(this).next(".note").find(".count").css("color","").css("font-weight","");

}

});

クラス「count_check」が設定されたタグで文字が入力されたら処理が実行されます。
変数「input_count」に入力された文字数が代入されます。
変数「limit」に文字が入力されたフォームは何文字までを許可しているのかをチェックする為の数字が代入されます。（このサンプルでは50）

次にHTML側のクラス「count」が設定されたタグの中に変数「input_count」の内容を代入します。

最後にif文で入力された文字数がlimitを超えている場合とそうでない場合の処理を書きます。
今回は、文字制限を超過した場合にクラス「count」内の数字を赤い太文字に変更しています。

文字制限を超過した際の処理は、工夫次第で色々できるとは思いますが、今回は控えめにcssの変更のみで処理を書きました。

この処理は変数「count_check」が設定されていればいくつでも設定できますので、まぁまぁ実用的かなぁーなんつって（・ｘ・；

サンプルはコチラ

jqueryを使ったタブメニューの作り方【簡易版】

2014年07月27日

-

カテゴリー：: javascript

中々尋常じゃない暑さと忙しさが続いており、ブログ書けていなかったんですが、小さなネタでもいいから書こうかなと思います。（汗

コンテンツがいくつかのカテゴリー分けがされており、１ページに収めるには縦に長くなりすぎるなぁって時によく使うタブメニューの作り方なんかを紹介したいと思います。

まずは、HTMLのサンプルコードです。

<div id="tab_content">
	<ul id="tab_head">
		<li><a class="active" href="#tab01">タブ01</a></li>
		<li><a href="#tab02">タブ02</a></li>
		<li><a href="#tab03">タブ03</a></li>
		<li><a href="#tab04">タブ04</a></li>
	</ul>
	<div id="tab01" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab02" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab03" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
	<div id="tab04" class="box">
		<!-- コンテンツの中身を記述 -->
	</div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

</ul>

</div>

</div>

</div>

</div>

上記のコードでは、#tab_contentで対象となるコンテンツ全体を囲み、#tab_head内がタブの切り替えを行うメニュー、各.boxがタブメニューで表示、非表示が切り替わるコンテンツとなっております。

次にCSSです。

#tab_content {
	margin: 0 auto;
	width: 600px;
	text-align: left;
	overflow: hidden;
}

#tab_head {
	width: 600px;
	overflow: hidden;
}

#tab_head li {
	margin: 0 5px 0 0;
	width: 120px;
	float: left;
	display: inline;
}

#tab_head li a {
	width: 120px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #333333;
	border: 1px solid #999999;
	border-bottom: none;
	display: block;
}

#tab_head li a:hover {
	text-decoration: none;
	background: #dddddd;
}

#tab_head li a.active {
	text-decoration: none;
	background: #dddddd;
}

#tab_content .box {
	padding: 10px;
	border: 1px solid #999999;
	display: none;
}

.box#tab01 {
	display: block;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

#tab_content {

margin: 0 auto;

width: 600px;

text-align: left;

overflow: hidden;

}

#tab_head {

width: 600px;

overflow: hidden;

}

#tab_head li {

margin: 0 5px 0 0;

width: 120px;

float: left;

display: inline;

}

#tab_head li a {

width: 120px;

height: 30px;

line-height: 30px;

text-align: center;

text-decoration: none;

color: #333333;

border: 1px solid #999999;

border-bottom: none;

display: block;

}

#tab_head li a:hover {

text-decoration: none;

background: #dddddd;

}

#tab_head li a.active {

text-decoration: none;

background: #dddddd;

}

#tab_content .box {

padding: 10px;

border: 1px solid #999999;

display: none;

}

.box#tab01 {

display: block;

}

#tab_head li a.activeは、現在表示されているコンテンツと対になっているメニューのオンオフをわかりやすくするための記述です。
はじめに記載したHTMLでは１番目のアンカーに.activeを適用しています。

#tab_content .boxは、display:none;で全て非表示の状態にし、１番目のコンテンツにあたる.box#tab01をdisplay:block;で表示させています。

上記２つの記述方法はjavascript側で行う事も可能なのですが、今回は、簡易版ということで、cssとhtml側で簡易的に対応しました。

最後にjavascriptの記述です。

$(function(){

	$("#tab_head").children("li").children("a").click(function(e){
		e.preventDefault();

		var url = $(this).attr("href");

		$("#tab_head").children("li").children("a").removeClass("active");
		$(this).addClass("active");

		$("#tab_content").children(".box").hide();
		$(url).show();
	});

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(function(){

$("#tab_head").children("li").children("a").click(function(e){

e.preventDefault();

var url = $(this).attr("href");

$("#tab_head").children("li").children("a").removeClass("active");

$(this).addClass("active");

$("#tab_content").children(".box").hide();

$(url).show();

});

})

#tab_head li内のアンカーがクリックされるとそのクリックされたアンカーに.activeを適用し、hrefの中身を読み取り、該当のコンテンツを表示させています。
hrefには表示させたいコンテンツのIDを記述しています。

サンプルはコチラ