ダリの雑記：WEBプログラム版

GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.4b

nandani

2012.06.30　バージョンアップしました。（version1.4b4）

2011.11.11　バージョンアップしました。（version1.4b3）

2011.08.13　バージョンアップしました。（version1.4b2）

複数版同様、個別版でも、住所から取得した座標はサーバーにキャッシュ（CSV形式）として残す仕様となりました。

スクリプトをダウンロードする

サンプルを見る

 

注意点

今回のバージョンではPHPも使用しております。もしPHP5.2以上が利用できないサーバをご利用の場合は、申し訳ございませんが、このバージョンは使用しないでください。

またサーバのPHPの設定（php.ini）で「allow_url_fopen」が有効になっていないと利用できませんので、こちらもご注意ください。

なお、PHPを使用するといっても、AJAXリクエストで実行させているだけなので、実際にマップを表示するページをPHP化させる必要はありません。

※作った直後でまだ十分な実験を行えていないので、このバージョンを使用する際は、よく動作をご確認の上、ご利用ください。

※現在ではv3でもAPIキーが必要となっています。
https://developers.google.com/maps?hl=ja

 

手順

「スクリプトの設定」と「map.js」へのパスが変わる（map.jsがgoogle_map_api_jsフォルダの中に入るため）以外は、前バージョンと同じです。

 

１．bodyタグに、バルーン用情報と地図出力用のタグを記述します。（以下例）

[html]
<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>
[/html]

ここで必要なものは

となっています。住所から座標を取得する場合は、マーカー座標＝中心座標となり、ズーム値はデフォルトで設定している値（スクリプト設定参照）となります。

もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。

[html highlight_lines="14,15,16"]
<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>
[/html]

class="gmap_coord"の中の座標は

マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル

または

マーカー緯度,マーカー経度,ズームレベル

または

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

中心座標を設定しない場合は、マーカーの座標が中心点となります。
ズーム値を設定しない場合は、デフォルトのズーム値が使用されます。（スクリプト設定参照）

 

２．以下のスクリプトをダウンロードしてください。

 

３．スクリプトの設定を行います。

google_map_api_js.zipをダウンロードしましたら、解凍してください。「google_map_api_js」というフォルダができます。

フォルダの中には

の３ファイルが入っています。

map.jsをプログラムが編集できるテキストエディタで開き、26行目付近の

[javascript num="26"]
var php_path = "js/v1.4b2/google_map_api_js/get_coord.php";
[/javascript]

の部分に、「get_coord.php」までのURLパスを記述してください。

例えば、ウェブルートの「js」フォルダに「google_map_api_js」フォルダをまるごとアップロードする場合は

[javascript num="26"]
var php_path = "http://ドメイン/js/google_map_api_js/get_coord.php";
[/javascript]

となります。

また、16～21行目付近にかけて、座標やズーム値の初期値を設定できます。（個別版の場合、特に指定がない場合はここで設定するズーム値（zoom）になるので、ご注意ください。）

[javascript num="16"]
var mc_lat = 34.6862971;    //中心座標の緯度（初期値）
var mc_lng = 135.5196609;    //中心座標の経度（初期値）
var mp_lat = 34.6862971;    //マーカーの緯度（初期値）
var mp_lng = 135.5196609;    //マーカーの経度（初期値）
var zoom = 5;        //ズーム値（初期値）
var zoom_max = 15;    //ズームの最大値（MAX20 MIN1）寄り過ぎを防ぐ
[/javascript]

以上の設定が終わりましたら、「google_map_api_js」フォルダをまるごとサーバにアップロードしてください。ただし、上記で設定した 通り、map.jsには「get_coord.php」までのパスが記述されているので、それに沿った場所にアップロードしてください。

また、「google_map_api_js」フォルダには、CSVファイルを書き出す必要があるため、パーミッションを777にするなど、書き込み権限をつけてください。

 

４．htmlファイルのheadタグにjqueryとmap.js、Google Map APIを読み込んでください。

[html]
<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/google_map_api_js/map.js"></script>
[/html]

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※「jquery」とスクリプトファイル一式（「google_map_api_js」フォルダ）は、「js」フォルダにアップロードしたと仮定して記述しています。

 

５．bodyタグのonloadにて、マップ表示用関数を呼び出します。

[html]
<body onload="map_single('map','gmap_data')">
[/html]

map_singleの引数について

これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）

 

６．スタイルを整えます。以下をheadタグに記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）

[css]

#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;
}

[/css]

サンプル [新しいウィンドウで開く]

以上です。

バグなどありましたらご連絡いただけるとありがたいです。

モバイルバージョンを終了