タグ:API
WordPressのカスタムフィールドでGoogleMAPその1
これまでの記事で、「座標の取得方法」「取得した座標からマップを表示する方法」を書いてきました。とはいえ、実際に「GoogleマップAPIで地図とマーカー・バルーンを表示(複数版)」のようなマップページを作る場合、座標をいちいち手動で取得してHTMLに書いていくのは非常にめんどくさい。こういう場合は何かしらのCMSを利用するのが一般的でしょう。
そこで今回はWordPressを使用することにして、エントリーごとに座標を登録する方法を記述します。
カスタムフィールドに座標を登録する方法と言えば、このブログでも取り扱ったことのある、「Google Maps Anywhere」(ダウンロードサイト:「WordPress Plugins/JSeries」)です。
このプラグインを使用すれば、WordPressの管理画面内だけで記事にマップを挿入できます。また、「カスタムフィールドに追加」ボタンを押すことにより、マーカーの座標がカスタムフィールドに追加されます。この座標を利用すれば、「GoogleマップAPIで地図とマーカー・バルーンを表示(複数版)」のようなマップを表示させることが可能となります。
■取得した座標の利用した、WordPressのテーマ記述例
※あくまで例なので、そのままは利用できません。
<ul id='gmap_list'>
<?php $myposts = get_posts('category=3&orderby=post_date');
foreach($myposts as $post) : ?>
<li>
<?php endif; ?>
<div>
<div class='gmap_title'><a name='gmap_title'><?php echo get_post_meta($post->ID, "shopname", true); ?></a></div>
<div class='gmap_photo'><img src='<?php echo get_post_meta($post->ID, "shopphoto", true); ?>' width='120' alt='<?php echo get_post_meta($post->ID, "shopname", true); ?>' /></div>
<div class='gmap_info'>
<?php echo get_post_meta($post->ID, "shopaddress", true); ?><br />
TEL:<?php echo get_post_meta($post->ID, "shoptel", true); ?><br />
営業時間:<?php echo get_post_meta($post->ID, "shopworktime", true); ?><br />
定休日:<?php echo get_post_meta($post->ID, "shopholiday", true); ?>
</div>
<div class='clear'></div>
<div class='gmap_description'>
<?php echo mb_substr(strip_tags($post->post_content),0,40,"UTF-8"); ?>...[<a href="<?php echo $post->guid; ?>">記事を読む</a>]
</div>
<div class='gmap_coord'>
<?php echo get_post_meta($post->ID, "Lat_Long", true); ?>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
<div id='map' style='width:600px;height:500px;'></div>
<div class='clear'></div>
「Lat_Long」:座標が入っているカスタムフィールドです。
nandani | 2010年08月02日 | コメント(0) | トラックバック(1) | CMS関連 | JavaScript関連
GoogleマップAPIで地図とマーカー・バルーンを表示(複数版)
座標データを元に、公開用マップ(マーカー・バルーン付き)を表示します。今回は1マップに複数のマーカーを表示します。(まずはサンプル)
手順
1.例によってあらかじめAPIキーを取得してください。
Google MAPS API に登録する (Google Maps API)
2.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが4件ほどデータを入れます。
<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"の中の座標は
マーカー緯度,マーカー経度
となっています。(座標についてはこちらから手動で取得できます)
なお、個別版では、この後に「中心座標緯度,中心座標経度,ズームレベル」が記述されていましたが、複数版ではマーカーの座標しか使用しません(記述されていても問題ありませんが反映はされません)。中心座標、ズームレベルについてはすべてのマーカーが表示されるように自動的に調整されます。
3.今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の3つです。
- 自作のマップ表示用スクリプト
map.js(ダウンロードページへ) - getElementsByClassNameをIEでも使用できるようにするスクリプト。
getElementsByClassName.js(ダウンロードサイト)
または
prototype.js(ダウンロードサイト) - GoogleMapAPI(キーがあればダウンロードの必要ありません)
htmlファイルのheadタグに上記のファイルを読み込んでください。(APIキーは1.で取得したものを記述してください。)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/getElementsByClassName.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
4.bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="all_marker_map('map','gmap_list')">
all_marker_mapの引数について
- 第一引数:マップを表示するタグのID(今回はmap)
- 第二引数:バルーン情報が入っているリストタグのID(今回はgmap_list)
これで、マーカー・バルーン付きマップが表示できます。
5.しかし前回同様このままだとレイアウトがおかしくなります。そこでスタイルにて座標情報を非表示にし、バルーンのレイアウトをGoogleマップ風にします。
以下スタイル(ダウンロードの場合はこちら)
#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;
}
これで複数の情報を1枚のマップに表示できます。バルーンを表示する場合はマーカーをクリックするか、左の店名をクリックしてください。
今回の記事で参考にさせていただいたサイト
nandani | 2010年07月31日 | コメント(0) | トラックバック(3) | JavaScript関連
GoogleマップAPIで地図とマーカー・バルーンを表示(個別版)
座標データを元に、公開用マップ(マーカー・バルーン付き)を表示します。(まずはサンプル)
手順
1.例によってあらかじめAPIキーを取得してください。
Google MAPS API に登録する (Google Maps API)
2.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"の中の座標は
マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル
となっています。(座標についてはこちらから手動で取得できます)
3.今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の3つです。
- 自作のマップ表示用スクリプト
map.js(ダウンロードページへ) - getElementsByClassNameをIEでも使用できるようにするスクリプト。
getElementsByClassName.js(ダウンロードサイト)
または
prototype.js(ダウンロードサイト) - GoogleMapAPI(キーがあればダウンロードの必要ありません)
htmlファイルのheadタグに上記のファイルを読み込んでください。(APIキーは1.で取得したものを記述してください。)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/getElementsByClassName.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
4.bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="map_single('map','gmap_data')">
map_singleの引数について
- 第一引数:マップを表示するタグのID(今回はmap)
- 第二引数:バルーン情報が入っているタグのID(今回はgmap_data)
これで、マーカー・バルーン付きマップが表示できます。(マーカーをクリックするとバルーンが表示されます)
5.しかし、これではレイアウトが整ってませんし座標情報が表示されてしまっています。
座標情報を非表示にし、バルーンのレイアウトをGoogleマップ風にします。
以下スタイル(ダウンロードの場合はこちら)
#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;
}
スタイル適応後のサンプルはこちら
スクリプトのベースとなっているのは「GoogleマップAPIで座標取得その2」同様「オレンジ工房 ORANGE-FACTORY」さんのソースです。(結構改造してますが)
nandani | 2010年07月31日 | コメント(0) | トラックバック(3) | JavaScript関連
GoogleマップAPIで座標取得その2
前回では、検索機能がなかったので追加しました。(まずはサンプル)
本来であれば
map.addControl(new google.maps.LocalSearch());
を追加することにより検索フォームを追加できるんですが、「Google AJAX Search APIキー」を取る必要があるし、中心座標はついてくるけど、マーカーが付いてこない。もちろんやり方はあるでしょうが、いまいちわからなかったので、こちらのサイトを参考に検索フォームを設置しました。
ソースのベースは前回同様「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースです。
手順
1.まずこちらで、Googleマップ用APIキーを取得してください。
Google MAPS API に登録する (Google Maps API)
2.headタグ内に以下のスクリプトを記述してください。
※(APIキー)のところは、1.で取得したAPIキーを入れてください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.6862971; //緯度初期値
var lng = 135.5196609; //経度初期値
var zoom = 7; //ズーム初期値
var geocoder;
var map;
var mk;var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
map = new GMap2(document.getElementById(mapname));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
geocoder = new GClientGeocoder();
// コントロール(小)表示
map.addControl(new GSmallMapControl);
// ドラッグ可能なマーカー
mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById("latitude").innerHTML = p.lat();
document.getElementById("longitude").innerHTML = p.lng();
});
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
// ズーム取得(イベント時)
GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
document.getElementById("zoom").innerHTML = newZoomLevel;
});
// ズーム初期設定
zoom=map.getZoom();
document.getElementById("zoom").innerHTML = zoom;
// 中心座標を取得(イベント時)
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("center_latitude").innerHTML = center.y;
document.getElementById("center_longitude").innerHTML = center.x;
});
// 中心座標初期設定
document.getElementById("center_latitude").innerHTML = lat;
document.getElementById("center_longitude").innerHTML = lng;
}
}//住所を取得する
function moveAddress(){
var address = document.getElementById("search_word").value;
geocoder.getLatLng(address, moveTo);
}function moveTo(latlng){
if (latlng){
map.setCenter(latlng, zoom);
mk.setPoint(latlng);
document.getElementById("latitude").innerHTML = mk.getLatLng().lat();
document.getElementById("longitude").innerHTML = mk.getLatLng().lng();
}else{
alert("住所から緯度経度に変換できません");
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
3.次にbody内に以下を記述してください
<div class"search">
<p>住所から検索:<input type="text" name="search_word" id="search_word" value="" />
<input type="button" onclick="moveAddress()" value="検索" /></p>
</div>
<div id="map" style="width:500px; height:500px;"></div>
<table>
<caption>パラメータ1</caption>
<tr>
<th>マーカー緯度</th>
<td id="latitude" name="latitude"></td>
</tr>
<tr>
<th>マーカー経度</th>
<td id="longitude" name="longitude"></td>
</tr>
<tr>
<th>中心緯度</th>
<td id="center_latitude" name="center_latitude"></td>
</tr>
<tr>
<th>中心経度</th>
<td id="center_longitude" name="center_longitude"></td>
</tr>
<tr>
<th>ズーム</th>
<td id="zoom" name="zoom"></td>
</tr>
</table>
id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。
※サンプルでは少しスタイルをつけています。
今回参考にさせていただいたサイト
nandani | 2010年07月30日 | コメント(0) | トラックバック(2) | JavaScript関連
GoogleマップAPIで座標取得その1
(追記)検索機能をつけた「その2」を追加しました。
APIを利用したJavascriptプログラムにて、Googleマップで使用できる緯度、経度を取得し、入力フィールドに表示するプログラムです。(まずはサンプル)
なお今回は「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースをベースに作らせていただきました。
手順
1.まずこちらで、Googleマップ用APIキーを取得してください。
Google MAPS API に登録する (Google Maps API)
2.headタグ内に以下のスクリプトを記述してください。
※(APIキー)のところは、1.で取得したAPIキーを入れてください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&v=2&key=(APIキー)" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var mapname = "map";
var lat = 34.7019079769257; //緯度初期値
var lng = 135.49497485160828; //経度初期値
var zoom = 7; //ズーム初期値var set_map = function () {
if (GBrowserIsCompatible()) {
// マップ表示
var map = new GMap2(document.getElementById(mapname));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
// ドラッグ可能なマーカー
var mk = new GMarker(point, {draggable:true});
// ドロップ時に緯度経度取得
GEvent.addListener(mk,"dragend", function() {
var p = mk.getLatLng();
document.getElementById("latitude").value = p.lat();
document.getElementById("longitude").value = p.lng();
});
// マップにマーカーを表示
map.addOverlay(mk);
document.getElementById("latitude").value = mk.getLatLng().lat();
document.getElementById("longitude").value = mk.getLatLng().lng();
// ズーム取得(イベント時)
GEvent.addListener(map, "zoomend",function(oldZoomLevel, newZoomLevel) {
document.getElementById("zoom").value = newZoomLevel;
});
// ズーム初期設定
zoom=map.getZoom();
document.getElementById("zoom").value = zoom;
// 中心座標を取得(イベント時)
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("center_latitude").value = center.y;
document.getElementById("center_longitude").value = center.x;
});
// 中心座標初期設定
document.getElementById("center_latitude").value = lat;
document.getElementById("center_longitude").value = lng;
// コントロール(小)表示
map.addControl(new GSmallMapControl);
}
}
// ONLOADイベントで呼び出し
window.onload = set_map;
window.onunload = GUnload();
//]]>
</script>
3.次にbody内に以下を記述してください
<div id="map" style="width:500px;height:500px;"></div>
<div>
<label for="latitude">マーカー緯度</label>
<input type="text" id="latitude" name="latitude" size="20" />
<label for="longitude">マーカー経度</label>
<input type="text" id="longitude" name="longitude" size="20" />
</div>
<div>
<label for="center_latitude">中心緯度</label>
<input type="text" id="center_latitude" name="center_latitude" size="20" />
<label for="center_longitude">中心経度</label>
<input type="text" id="center_longitude" name="center_longitude" size="20" />
</div>
<div>
<label for="longitude">ズーム</label>
<input type="text" id="zoom" name="zoom" size="2" />
</div>
id="map"の部分にマップを表示するようにしています。このタグには必ずスタイルでwidthとheightを設定してください。
これで、マーカーをドラッグ&ドロップで動かすたびにその座標を取得できます。
また、マップをつかんで移動したり、コントローラでズームをするたびに「中心座標」や「ズーム」値を取得します。
今回参考にさせていただいたサイト
nandani | 2010年07月28日 | コメント(0) | トラックバック(1) | JavaScript関連