JavaScript関連
GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.3
今回のバージョンでは住所から座標を取得できるようにしました。（まずはサンプル）
手順
1.bodyタグに、バルーン用情報と地図出力用のタグを記述します。（以下例）
<div id="gmap_data">
<div class='gmap_title'><a name="gmap_title">井出商店</a></div>
<div class='gmap_photo'><img src="img/ide.jpg" width="120" alt="井出商店" /></div>
<div class='gmap_info'>
住所：<span class='gmap_address'>和歌山県和歌山市田中町4-84</span><br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class='clear'></div>
<div class='gmap_description'>
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
</div>
<div id="map" style="width:500px;height:500px;"></div>
<div class='clear'></div>
ここで必要なものは
- id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
- class="gmap_title"＋aタグ：タイトルをクリックしたときに吹き出しを表示します。
【追記】 - class="gmap_address"：住所。この住所を元に座標へ変換します。
- id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。
となっています。住所から座標を取得する場合は、マーカー座標＝中心座標となり、ズーム値はデフォルトで設定している値（15）となります。
もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。
<div id='gmap_data'>
<div class='gmap_title'><a name='gmap_title'>井出商店</a></div>
<div class='gmap_photo'><img src='img/ide.jpg' width='120' alt='井出商店' /></div>
<div class='gmap_info'>
住所：和歌山県和歌山市田中町4-84<br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class='clear'></div>
<div class='gmap_description'>
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
<div class='gmap_coord'>
34.2284871,135.1894984,34.23075140779955,135.19043684005737,16
</div>
</div><div id='map' style="width:500px;height:500px;"></div>
<div class='clear'></div>
class="gmap_coord"の中の座標は
マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル
または
マーカー緯度,マーカー経度,ズームレベル
または
マーカー緯度,マーカー経度
となっています。（座標についてはこちらから手動で取得できます）
中心座標を設定しない場合は、マーカーの座標が中心点となります。
ズーム値を設定しない場合は、デフォルトのズーム値（15）が使用されます。
２．以下のスクリプトをダウンロードしてください。
自作のマップ表示用スクリプトv3版
- 自作のマップ表示用スクリプトv3版（複数版と同じものです）
map.js（ダウンロードページへ） - jquery.js（ダウンロードサイトへ）
３．htmlファイルのheadタグに上記のファイルとGoogleMapAPIを読み込んでください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
※ダウンロードした「map.js」は、「map_v1.3.js」のようにバージョンナンバーが付いているので、ファイル名を変更するか、上記の読み込み部分の記述を変更してください。
４．bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="map_single('map','gmap_data')">
map_singleの引数について
- 第一引数：マップを表示するタグのID（今回はmap）
- 第二引数：バルーン情報が入っているタグのID（今回はgmap_data）
これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）
５．スタイルを整えます。以下をheadタグに記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）
#map{
float:left;
}.clear{
clear:both;
}/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}.gmap_block .gmap_info{
font-size:75%;
}.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}#gmap_data .gmap_photo{
float:left;
width:130px;
}#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_data .gmap_description{
padding-top:5px;
}.gmap_coord{
display:none;
}
以上です。
バグなどありましたらご連絡いただけるとありがたいです。
■追記
class="gmap_title"を忘れると、エラー警告が出ることに気付いたので、付け加えました。
今回参考にさせていただいたサイト
nandani | 2010年10月30日 | コメント(0) | トラックバック(7) | API関連 | JavaScript関連
GoogleマップAPI v3で地図とマーカー・バルーンを表示プログラムのバグ修正
「GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） その２」の記事で配布しているプログラムにバグがありました。
バグの内容
「map_v1.1.js」「map_v1.2.js」にて、個別用に使用する場合、マーカーポイントの座標ではなく、中心座標にマーカーを置いてしまう。
修正版
「map_v1.1.js」「map_v1.2.js」をご利用の方は、以下のプログラムをダウンロードしなおしてください。
nandani | 2010年10月30日 | コメント(0) | トラックバック(0) | API関連 | JavaScript関連 | News ＆ Topics
innerHTMLの注意点（Javascript）
タグの中身をJavascriptの「innerHTML」で読み込んだとき、その中にあるタグの文字がIEではなぜか大文字になります。
しかも<br />と書いても勝手に<BR>という風にスラッシュを取り除いてしまうという迷惑仕様。
ちなみにFirefoxでは大文字にはなりませんが、スラッシュを勝手に取り除いてしまうという点は同じです。
replaceなどを使用するときは注意しましょう！
nandani | 2010年10月27日 | コメント(0) | トラックバック(0) | JavaScript関連
MTにてカテゴリを絞り込んで検索する方法２
前回はこちら「MTにてカテゴリを絞り込んで検索する方法」
今回はプラグインを使用します。
この方法のメリットは複数のカテゴリで絞り込めることです。
たとえば以下のようにカテゴリ構成されているとします。
ジャンル
SF
アニメ
クライム
コメディ
ホラー
メディア
DVD
VHS
ブルーレイ
レーザーディスク
「SF×DVD」や「コメディ×VHS」のように複数カテゴリで絞り込みたい場合、前回の方法では実現不可能でした。（一見<input category="SF AND DVD" />で可能そうですができませんでした。）
そこでこちらのサイトで配布しているプラグインを使用します。
CategorySearch（Technology on Informationさんのサイト）
上記のサイトの「リリース＞ダウンロードページ」から最新版をダウンロードしてください。
インストール方法は、ダウンロードしてきたファイルを解凍したのち、「plugins」の中にアップロードすればOKです。
使用方法についても上記のサイトに記述しております。
では以下使用例です。
※なお、以下で使用しているテンプレートはMT5標準で用意されているテーマ「クラッシックブログ」のテンプレートです。
１．検索ウィジェットを編集する
MTブログ管理画面の「デザイン＞ウィジェット＞検索」を開いてください。
その中のformタグで囲まれている部分を、まるごと以下のように書き換えてください。
<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<MTTopLevelCategories>
<MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
<div>
<input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
<select name="<MTCategoryID>">
<option value="0">すべての<MTCategoryLabel></option>
<MTSubCategories>
<MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
<MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
<MTIf name="selected">
<option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
<MTElse>
<option value="<MTCategoryLabel>"><MTCategoryLabel></option>
</MTIf>
</MTCategorySearchLink>
</MTSubCategories>
</select>
</div>
</MTTopLevelCategories>
<div>
<input type="text" name="search" value="<$mt:SearchString$>" />
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchIgnoreText" value="1" />
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="submit" accesskey="4" value="検索" />
</div>
</form>
■追記（2010/10/27）
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。
２．「検索結果」テンプレートを編集する
MTブログ管理画面の「デザイン＞テンプレート＞検索結果」を開いてください。
「<$mt:SearchString$>」と一致するもの
の部分を
<MTSetVarBlock name="search_string"><$mt:SearchString$></MTSetVarBlock>
<mt:CategorySearchSets glue=" と ">
「<mt:CategorySearchCategories>
<mt:CategoryLabel>
</mt:CategorySearchCategories>」
<mt:CategorySearchSetsFooter>
<MTIf name="search_string">
と「<$mt:SearchString$>」
</MTIf>
の検索結果
</mt:CategorySearchSetsFooter>
</mt:CategorySearchSets>
に変更してください。
この段階でとりあえず再構築をかけてください。
ここまでで、２種類のカテゴリによる絞り込み検索ができるようになりました。
しかし、テキストフォーム(name="search")のところに検索ワードを入力してもスルーされてしまうと思います。
これは
<input type="hidden" name="CategorySearchIgnoreText" value="1" />
が記述されているためで、「CategorySearchIgnoreText」のvalueに値が入っていると、検索ワードが入っていなくても検索結果を返してくれるという利点がある代わりに、検索ワードは無視されてしまうという欠点があります。
できれば検索ワードが入っていない場合はカテゴリのみで検索し、入っている場合はそのワードでも検索するという風にしたいところです。
そこで、今回もJavascriptを使用します。
３．Javascriptを追記する。
読み込めればどこでもいいんですが、とりあえず「デザイン＞ウィジェット＞検索」を開いてください。
一番上に下記のソースを追記します。
<script type="text/javascript">
function searchTextCheck(){
var searchText = document.getElementById("searchText").value;
if(searchText != ""){
document.getElementById("CategorySearchIgnoreText").value = "0";
}
}
</script>
要するに、検索ボタンをクリックした瞬間、テキストフォームに検索ワードが入っていなければそのままにし、入っていればCategorySearchIgnoreTextのvalueを"0"にする、というわけです。
４．Javascriptで使用するためタグを修正する。
最後に１．で追加したform内のタグの値を少し変更します。
<form me\thod="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<MTTopLevelCategories>
<MTSetVarBlock name="tcid"><MTCategoryID></MTSetVarBlock>
<div>
<input type="hidden" name="CategorySearchSets" value="<MTCategoryID>" />
<select name="<MTCategoryID>">
<option value="0">すべての<MTCategoryLabel></option>
<MTSubCategories>
<MTSetVarBlock name="clabel"><MTCategoryLabel></MTSetVarBlock>
<MTCategorySearchLink type="absolute" set="$tcid" value="$clabel" op="replace" text="ignore" >
<MTIf name="selected">
<option value="<MTCategoryLabel>" selected="selected"><MTCategoryLabel></option>
<MTElse>
<option value="<MTCategoryLabel>"><MTCategoryLabel></option>
</MTIf>
</MTCategorySearchLink>
</MTSubCategories>
</select>
</div>
</MTTopLevelCategories>
<div>
<input type="text" name="search" id="searchText" value="<$mt:SearchString$>" onkeypress="searchTextCheck();" />
<input type="hidden" name="CategorySearch" value="1" />
<input type="hidden" name="CategorySearchIgnoreText" id="CategorySearchIgnoreText" value="1" />
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" />
<input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />
<input type="submit" accesskey="4" value="検索" onclick="searchTextCheck();" onkeypress="searchTextCheck();" />
</div>
</form>
■追記（2010/10/27）
MTCategorySearchLinkのtypeを「relative」から「absolute」に変更しました。
検索ワードを入力するテキストフォームのタグに
「id="searchText"」
「onkeypress="searchTextCheck();"」
CategorySearchIgnoreTextのタグに
「id="CategorySearchIgnoreText"」
検索ボタンに
「onclick="searchTextCheck();"」
「onkeypress="searchTextCheck();"」
をそれぞれ追加し、再構築してください。
これで、複数のカテゴリによる絞込み検索ができるようになったかと思います。
いや～、それにしてもすばらしいプラグインですね。
感謝感謝です。
nandani | 2010年10月26日 | コメント(6) | トラックバック(0) | CMS関連 | JavaScript関連
MTにてカテゴリを絞り込んで検索する方法１
やりたいこと。
MTの検索フォーム。通常だとフリーワードの検索しかできないが、カテゴリを絞り込んだ状態でフリーワード検索を行いたい。
というわけでいい方法がないかな～とググっていると、こちらのサイトでバッチリ解決しました。
MT：検索フォームにカテゴリー絞り込み機能をつける（グラビカ学習帳さんのサイト）
MTブログ管理画面の「デザイン＞ウィジェット＞検索」ウィジェットにてformタグの直下に
<input type="hidden" id="select" name="limit" value="<$mt:SearchMaxResults$>" />
<select name="category">
<option value="0">全カテゴリー</option>
<MTTopLevelCategories>
<MTSubCatIsFirst></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount">
<option value="<mt:categorylabel>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTIfNonZero><MTSubCatsRecurse><MTSubCatIsLast></MTSubCatIsLast>
</MTTopLevelCategories>
</select>
を入力するだけ。（グラビカ学習帳さんのソースをまるまる引用）
これで、プルダウンでカテゴリを絞り込み、かつフリーワード検索を行うことができます。
ただ、問題点が。
上記の方法を試してみるとわかりますが、「検索結果」画面に移るとカテゴリ選択のプルダウンが「全カテゴリー」に戻ってしまいます。検索についてはもちろん選択したカテゴリで絞り込まれているので問題ないといえば問題ないんですが、できれば選択したままの状態で表示してほしい。
<$mt:SearchString$>のようにカテゴリの値も取得できるタグがあれば、selected="selected"をつけることができますが、どうもそういうタグが無いっぽい？
なぜ無いんだーーー！！
仕方ないのでjavascriptにてGETリクエスト値を取得することにします。
※以下の変更はMT5で行っております。MT4での動作は確認しておりません。
１．カテゴリプルダウンにIDをつけます。
上記の「検索」ウィジェットで追加したプルダウンの、selectタグに「id="select_category"」を追記します。
<input type="hidden" id="select" name="limit" value="<$mt:SearchMaxResults$>" />
<select name="category" id="select_category">
<option value="0">全カテゴリー</option>
<MTTopLevelCategories>
<MTSubCatIsFirst></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount">
<option value="<mt:categorylabel>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTIfNonZero><MTSubCatsRecurse><MTSubCatIsLast></MTSubCatIsLast>
</MTTopLevelCategories>
</select>
２．検索ワード出力の部分を改良します。
MTブログ管理画面の「デザイン＞テンプレート＞検索結果」テンプレートを開き
「<$mt:SearchString$>」と一致するもの
の部分を
カテゴリ：<span id="search_category"></span><br />
<MTSetVarBlock name="category_string"><$mt:SearchString$></MTSetVarBlock>
<MTIf name="category_string" eq="">
検索ワード：なし<br />
<MTElse>
検索ワード：<$mt:SearchString$><br />
</MTIf>
と一致するもの
に変更します。
３．２．と同じく「検索結果」テンプレートのheadタグ内に以下のスクリプトを記述します。
<script type="text/javascript">
function getRequest(){
if(location.search.length > 1) {
var get = new Object();
var ret = location.search.substr(1).split("&");
for(var i = 0; i < ret.length; i++) {
var r = ret[i].split("=");
get[r[0]] = r[1];
}
return get;
}else{
return false;
}
}function searchCategory(){
var get = getRequest();
var search_category = decodeURI(get["category"]);
if(search_category == "0"){
document.getElementById("search_category").innerHTML = "すべて";
}else{
document.getElementById("search_category").innerHTML = search_category;
}
var option = document.getElementById("select_category").getElementsByTagName("option");
for(i=0;i<option.length;i++){
if(option[i].value == search_category){
option[i].selected = true;
break;
}
}
}
</script>
getRequest()関数は「JavaScriptでGETを取得する（S-MEMOサイトさん）」を参考にしました。（というかまんまです。）
４．同じく「検索結果」テンプレートのbodyタグにてsearchCategory()関数を呼び出します。
bodyタグに「onload="searchCategory()"」を追加してください。
<body id="<$mt:BlogThemeID$>" class="mt-search-results <$mt:Var name="page_layout"$>" onload="searchCategory()">
これで検索結果ページでも、どのカテゴリで絞り込んだかを表示でき、かつ検索フォームのカテゴリ選択プルダウンが選択されたままの状態で表示されるようになります。
こんな感じ↓
nandani | 2010年10月25日 | コメント(0) | トラックバック(2) | CMS関連 | JavaScript関連
GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） その２
■新バージョンに関する追記（2010/10/30）
新バージョンv1.3を追加しました。
今後ご利用の方はこちらの記事をお読みください。
■バグに関する追記（2010/10/30）
バグ修正（v1.1、v1.2）
「map_v1.1.js」「map_v1.2.js」にて、個別用に使用する場合、マーカーポイントの座標ではなく、中心座標にマーカーを置いてしまうというバグを見つけたため、修正しました。
しょうもないミスをして申し訳ございません。
2010/10/30までに「map_v1.1.js」「map_v1.2.js」をダウンロードした方は、修正版をアップしましたので以下の記事にリンクしている「map_v1.1.1.js」「map_v1.2.1.js」をダウンロードしなおしてください。
■バグに関する追記(2010/09/12)
下記のプログラム「map_v1.1.js」「map_v1.2.js」ですが、少々バグがあったため修正しました。もし2010/09/12の16時までにダウンロードした方がいましたら、もう一度ダウンロードしなおしてください。
以下本文
前回の問題点である、リンクからバルーンを表示できないという問題点を解決しました。（なんかすっごくしょうもない所でつまづいてました・・・）
使用する場合は以下のプログラムをダウンロードして、前回のmap.jsと差し替えてください。
htmlとcssの記述方法は前回と同じですのでそちらをご参照ください。
ただバルーンが残るからうっとおしいんですよね～。この部分も解決しなくては。v2では簡単だったのになぁ～・・・
■追記
バルーンが複数表示されてしまう問題点について、解決しました。
（参考サイト：Google Maps 活用講座サイト）
バルーンを一つだけ表示させたい方はこちらをご利用ください。
（複数表示させたい場合はv1.1.1をご利用ください。）
※なお上記のプログラム「map_v1.1.1.js」「map_v1.2.1.js」は「個別用」でも利用できます。
htmlとcssの記述方法はこちらをご参照ください。
動作はまったく同じですが、以下個別用のサンプル
今回参考にさせていただいたサイト
Google Maps 活用講座サイト：該当記事「Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)」
nandani | 2010年09月11日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連
javascriptの実行は順番が大事
メモ書き
単独では正常に動作していたのに、複数のスクリプトを読み込んだ途端、動かなくなることがよくあります。
考えられる原因として
- 単純に関数名がかぶってしまっている
- jQueryとprototypeを同時に使っている
などがありますが、最近よくはまってしまうのが、プログラムの実行順。
スクリプトＡ→Ｂという実行順なら正常なのに、Ｂ→Ａになった途端動かなくなってしまう。
当たり前のことですね・・・。いやいや待ってください。
単純にプログラムの記述順に実行してくれているのならまだしも、なぜかjavascriptではまるで並列処理をしているかのように関数の処理を同時に行っている節があります。
A();
B();
という順で記述しているのに、B()処理のほうが速く終わったり、読み込むたびに処理の終了順が入れ替わるのか正常だったりダメだったり。
とりあえず、この場合は
A();
function A(){
～Aの処理～
B();
}
で一応解決します。
しかしスクリプトファイルが違う時は、こういうわけにはいかない場合があります。（勝手にほかのスクリプトを変えてしまってはいけない場合など）
その場合は、自分のスクリプトの実行開始時間をわざと遅らせましょう。（自分のスクリプトの方が後でないとダメな場合のみですが）
setTimeOut(B, 100);
まあ正直、この方法もどうかと思うんですが、とりあえずの解決をみたので、今回はこれでよし！
なにかほかにいい意見がある方は、ぜひ教えてください！m(。-＿-。)m
nandani | 2010年09月02日 | コメント(0) | トラックバック(0) | JavaScript関連
GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版）
■新バージョンに関する追記（2010/10/30）
新バージョンv1.3を追加しました。
今後ご利用の方はこちらの記事をお読みください。
こちらの記事のGoogleMapAPI v3版です。（まずはサンプル）
※【追記】 以下の問題点を解決したバージョンのプログラムを追加しました。
ただ、まだ未完でして左リストのリンクをクリックしてからのバルーン表示機能がまだうまくいってません。
それでもかまわないという方は続きをどうぞ。
手順
1.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが４件ほどデータを入れます。（以下例）
<ul id='gmap_list'>
<li>
<div class='gmap_title'><a name='gmap_title'>アロチ本家丸高</a></div>
<div class='gmap_photo'><img src='img/marutaka.jpg' width='120' alt='京橋幸太郎' /></div>
<div class='gmap_info'>
和歌山県和歌山市友田町2-50<br />
TEL：073-432-3313<br />
営業時間：17:30～3:00<br />
定休日：日曜
</div>
<div class='clear'></div>
<div class='gmap_description'>
醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
</div>
<div class='gmap_coord'>
34.2326948,135.1848098
</div>
</li>
<li>
<div class='gmap_title'><a name='gmap_title'>井出商店</a></div>
<div class='gmap_photo'><img src='img/yamatame.jpg' width='120' alt='山為食堂' /></div>
<div class='gmap_info'>
和歌山県和歌山市田中町4-84<br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class='clear'></div>
<div class='gmap_description'>
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
<div class='gmap_coord'>
34.2284871,135.1894984
</div>
</li>
<li>
<div class='gmap_title'><a name='gmap_title'>まるイ</a></div>
<div class='gmap_photo'><img src='img/marui.jpg' width='120' alt='まるイ' /></div>
<div class='gmap_info'>
和歌山県和歌山市中之島2323<br />
TEL：073-427-2662<br />
営業時間：平日19:00～翌3:00/土19:00～翌4:00<br />
定休日：日曜
</div>
<div class='clear'></div>
<div class='gmap_description'>
全国から集まる麺ファンを虜にするこんもりと盛られたネギの山！
</div>
<div class='gmap_coord'>
34.2357444,135.1855124
</div>
</li>
<li>
<div class='gmap_title'><a name='gmap_title'>ラグマン</a></div>
<div class='gmap_photo'><img src='img/raguman.jpg' width='120' alt='ラグマン' /></div>
<div class='gmap_info'>
和歌山県和歌山市黒田258-7 玉置マンション1F<br />
TEL：073-475-1200<br />
営業時間：12:00～14:00/17:30～23:30 <br />
定休日：水曜日
</div>
<div class='clear'></div>
<div class='gmap_description'>
“らぐまん”ならではのオリジナルラーメンは、34種類！レゲエが流れるログハウス作りのオシャレなお店。
</div>
<div class='gmap_coord'>
34.2359753,135.197503
</div>
</li>
</ul><div id='map' style='width:500px;height:500px;'></div>
<div class='clear'></div>
※それのぞれに情報は必ずリスト形式にしてください。
ここで必要なものは
- id='gmap_list'：このIDを元にバルーン、マーカー用データを取得します。必ず「ul」または「ol」につけてください。
- class="gmap_coord"：このclass名を元に座標情報を取得します。
- id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。
class="gmap_coord"の中の座標は
マーカー緯度,マーカー経度
となっています。（座標についてはこちらから手動で取得できます）
なお、個別版では、この後に「中心座標緯度,中心座標経度,ズームレベル」が記述されていましたが、複数版ではマーカーの座標しか使用しません（記述されていても問題ありませんが反映はされません）。中心座標、ズームレベルについてはすべてのマーカーが表示されるように自動的に調整されます。
２．以下のスクリプトをダウンロードしてください。なおv2版の記事では「getElementsByClassName.js」を使用していましたが、今回は「jQuery」を使用します。
- 自作のマップ表示用スクリプトv3版
map.js（バージョンv1.1.1 or 1.2.1のダウンロードはこちらから） - jquery.js（ダウンロード）
※map.jsは個別版で配布しているものと同じスクリプトです。
３．htmlファイルのheadタグに上記のファイルを読み込んでください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
４．bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="map_all('map','gmap_list')">
map_allの引数について
- 第一引数：マップを表示するタグのID（今回はmap）
- 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）
これで、マーカー・バルーン付きマップが表示できます。
※v2では関数名を「all_marker_map」としていましたが、今回は「map_all」に名前を変更しました。
５．スタイルを整えます。以下をheadタグ内に記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）
#map{
float:left;
}.clear{
clear:both;
}/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}.gmap_block .gmap_info{
font-size:75%;
}.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}#gmap_data .gmap_photo{
float:left;
width:130px;
}#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_data .gmap_description{
padding-top:5px;
}/*お店の情報（リスト用）*/
#gmap_list{
width:300px;
height:500px;
overflow:scroll;
float:left;
margin:0px;
padding:0px;
}#gmap_list li{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}#gmap_list .gmap_photo{
float:left;
width:130px;
}#gmap_list .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_list .gmap_title a{
color:#0000FF;
text-decoration: underline;
cursor:pointer;
}#gmap_list .gmap_info,
#gmap_list .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_list .gmap_description{
padding-top:5px;
}.gmap_coord{
display:none;
}
以上です。
今回参考にさせていただいたサイト
nandani | 2010年08月21日 | コメント(2) | トラックバック(2) | API関連 | JavaScript関連
GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版）
■新バージョンに関する追記（2010/10/30）
新バージョンv1.3を追加しました。
今後ご利用の方はこちらの記事をお読みください。
こちらの記事のGoogleMapAPI v3版です。（まずはサンプル）
v3ではなんと、
- APIキーが必要ない！
- iPadでも拡大移動が可能！
- GPS機能が使える！
- マーカーの吹き出しが複数表示できる！
などの変更点がありました。スクリプトの記述方法もかなり変わってますが、html側の記述はほぼ変わりません。
手順
1.bodyタグに、バルーン用情報を記述します。（以下例）
<div id='gmap_data'>
<div class='gmap_title'><a name='gmap_title'>井出商店</a></div>
<div class='gmap_photo'><img src='img/ide.jpg' width='120' alt='井出商店' /></div>
<div class='gmap_info'>
住所：和歌山県和歌山市田中町4-84<br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class='clear'></div>
<div class='gmap_description'>
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
<div class='gmap_coord'>
34.2284871,135.1894984,34.23075140779955,135.19043684005737,16
</div>
</div><div id='map' style="width:500px;height:500px;"></div>
<div class='clear'></div>
ここで必要なものは
- id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
- class="gmap_coord"：このclass名を元に座標情報を取得します。
- id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。
class="gmap_coord"の中の座標は
マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル
となっています。（座標についてはこちらから手動で取得できます）
２．以下のスクリプトをダウンロードしてください。なおv2版の記事では「getElementsByClassName.js」を使用していましたが、今回は「jQuery」を使用します。
- 自作のマップ表示用スクリプトv3版
map.js（バージョンv1.1.1 or 1.2.1のダウンロードはこちらから） - jquery.js（ダウンロード）
３．htmlファイルのheadタグに上記のファイルを読み込んでください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
４．bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="map_single('map','gmap_data')">
map_singleの引数について
- 第一引数：マップを表示するタグのID（今回はmap）
- 第二引数：バルーン情報が入っているタグのID（今回はgmap_data）
これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）
５．スタイルを整えます。以下をheadタグに記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）
#map{
float:left;
}.clear{
clear:both;
}/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}.gmap_block .gmap_info{
font-size:75%;
}.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}#gmap_data .gmap_photo{
float:left;
width:130px;
}#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_data .gmap_description{
padding-top:5px;
}.gmap_coord{
display:none;
}
以上です。
今回参考にさせていただいたサイト
nandani | 2010年08月21日 | コメント(0) | トラックバック(3) | API関連 | JavaScript関連
iPad向けサイトにてjavascriptを使用する際の注意事項
例えば、以下のようにタグ内に数値が含まれているとします。
<div id="float_num">25.1234567</div>
これをjavascriptのinnerHTMLでデータを取得すると、float型の小数を取得することができます。
get_num = document.getElementById("float_num").innerHTML;
もし、これを文字列として受け取ってしまった場合でも、parseFloatでfloat型にキャストしてあげれば問題なしです。
get_num = parseFloat(get_num);
さてここからが問題です。こちらにサンプルを用意しました。このサンプルは
- 「id="float_num"」のタグから数値を取得
- 取得した数値をparseFloatでfloat型にキャスト。
- その結果を「id="text"」のタグに出力する
という簡単なものです。
パソコンで見る分には何の問題もないでしょう。以下のように出力されるはずです。
25.1234567
以下出力結果
25.1234567
しかしipadで見た場合は
25.1234567
以下出力結果
NaN
という風に、数値にはリンクが張られ、出力はNaNになってしまいます。
なぜかiPadでは特定の桁の数値にリンクを自動的にはってしまうという非常にありがた迷惑な機能があるようです。（もしかしたら設定で解除できるかもしれませんが）
リンクタグ入りの数字をparseFloatしても当然正常な数値は返ってきません。
そこで、データを取得後、replaceで余計なタグを取り除きます。
get_num = document.getElementById("float_num").innerHTML;
get_num = get_num.replace(/<\/?[^>]+>/gi, "");
get_num = parseFloat(get_num);
※replaceの記述は「JavaScript++かも日記」さんのサイトのスクリプトを参考にさせてもらいました。
上記の処理をほどこしたサンプルはこちらになります。
これでiPadでも出力結果が正常に出力されます。
追記
iPadに限らず、iPhoneのsafariでも同様に、電話番号らしき数字にリンクを自動的に入れる機能が付いているそうです。上記に記述した方法でも解決できますが、もっと簡単な方法がありました。参考は「とあるエンジニアの日常」さんのサイト。
メタタグで以下のように記述すれば良いみたいです。
<meta name="format-detection" content="telephone=no"/>
これで電話番号への自動リンクが無効化されます。
今回参考にさせていただいたサイト
nandani | 2010年08月11日 | コメント(0) | トラックバック(0) | JavaScript関連