- 最近ヤマダ電機とビックカメラの覇権争いが激しい
- 他にGoogleMapサンプル(新宿)もあります
#GoogleMap(lat:35.730, long:139.711, zoom:16, height:400)lat:緯度(35.730°)
long:経度(139.711°)
zoom:ズームレベル(16)
height:地図の高さ(400px)
- Google Maps API 地図の基本
http://code.google.com/intl/ja/apis/maps/documenta... - Google Maps API コントロール
http://code.google.com/intl/ja/apis/maps/documenta... - 緯度経度取得
http://www.geekpage.jp/web/google-maps-api/get-xy.... - googleマップはlivedoor wikiのページに貼り付けできない?
http://knowledge.livedoor.com/38743 - livedoor wikiでgoogleマップを表示させるプラグインは?
http://knowledge.livedoor.com/34008
- 1. Googleに登録しkeyをもらう
- Google MAPS API に登録するページにアクセス
http://code.google.com/intl/ja/apis/maps/signup.ht... - 利用規約を読んだうえでこれに同意します
- 使用する Web サイトの URLに自分のlivedoorwikiのURLを入れる
「http://wiki.livedoor.jp/xxxxxxxxx/」 - 「APIキー生成」ボタンを押す
- キー取得結果が表示されるので切り取りファイルに保存しておく
ABQIAAAA_3piJqp4FogblQfh6EdOLxQ1NrYo_joG7GurhVxy1limfFJClxRW0GB8ie_9Ryc61Uffq7bnu03d_g
JavaScript Maps API Example
...
// Note: you will need to replace the sensor parameter below with either an explicit true or false value.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=tr..." type="text/javascript"></script>
- 2. フリーエリアにスクリプトを追加する
- フリーエリアの設定編集は「設定」→「Wiki(ウィキ)の基本設定」→「サイドメニューの設定」→フリーエリアの「編集」にて行う
- このページ最後のスクリプトを貼り付けkeyの部分を上記1で取得したものに差し替える
- 3. 本文の地図を挿入したいところに#GoogleMap構文を記述する
#GoogleMap(lat:35.730, long:139.711, zoom:16, height:400)
lat :緯度( -90.0 〜 90.0) ※デフォルト渋谷
long:経度(-180.0 〜 180.0) ※デフォルト渋谷
zoom:ズームレベル( 0 〜 19) ※デフォルト 13
height:地図の高さ(ピクセル) ※デフォルト 300
- いちばん上の行はGoogleから取得したkeyに置き換えてください
- ページリダイレクトの機能もついたスクリプトとなっています
<script type="text/javascript" language="JavaScript" charset="utf-8" src="http://maps.google.com/maps?hl=ja&file=api&v=2&sensor=false&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
</script>
<script type="text/javascript">
var divs = document.getElementById('page-body').getElementsByTagName('div');
var checkAndInit;
for (var i=0,div; div=divs[i]; ++i) {
if (div.className=='user-area') {
var match;
if (match = div.innerHTML.match(/\n *RedirectTo: ?<a href="([^"]+)">/i)) {
location.href = match[1];
} else if (match = div.innerHTML.match(/[\n>]([^>\n]*GoogleMap\(([- 0-9a-z.,:]*)\))/i) ) {
makeGMap(div, match[2]);
}
break;
}
}
function makeGMap(div, sparm) {
// purse params
var parms = {lat:35.664694, long:139.700016, zoom:13, height:300}; // default
for (var wk=sparm.replace(/ /g,'').split(','),j=0;j<wk.length;++j) {
var w = wk[j].match(/^(lat|long|zoom|height):(-?[0-9]+(|[.][0-9]+))$/);
if (w) parms[w[1]] = w[2] - 0; // want to get numelic
}
div.innerHTML = div.innerHTML.replace(
match[1],
'<div id="map_div" style="height:'+parms.height+'px"><h1>MAP HERE</h1></div>'
);
var cnt=0;
checkAndInit = function () {
try {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_div"));
var point = new GLatLng(parms.lat, parms.long);
map.setCenter(point, parms.zoom);
map.addOverlay(new GMarker(point));
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
}
} catch(err) {
if (++cnt<6) window.setTimeout('checkAndInit()', 1000);
}
}
window.setTimeout('checkAndInit()', 2000);
}
</script>
最新コメント