Google Mapを埋め込む。
自分のために覚え書き。
Winならもっと手軽に作れるらしいんだけどなぁ。
まずはこちらを。
作り方はこちら。
1.まずは
ココでGoogleAPIを取得する。
地図を公開するサイトのURL(ベースURLでOK)を入力してAPI Keyを取得します。
2.基本になるスクリプトが表示されるのでそれを元に改造していきます。
3.基本ソースはこれ。
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&v=1&key=あなたのKey">
</script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.76585626602173, 35.672236430764), 4);
//]]>
</script>
1行目:ピクセル数が表示サイズですここでは幅500ピクセル、高さ400ピクセルになっています。
3行目:取得したAPI Keyを入力します。
8行目:地図の中心となる座標を記入します。
こちらが便利です。(ダブルクリック又はドラッグで中心になった座標が左下に表示されます。)
その後ろにある数字(ここでは4)がズーム度数です。0(テレ)〜17(ワイド)まで。
続いて更に改造編。
<div id="map" style="width: 500px; height: 400px"></div>
<script src="http://maps.google.com/maps?file=api&v=1&key=あなたのKey" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(139.76585626602173, 35.672236430764), 1);
var point = new GPoint(139.76585626602173, 35.672236430764);
var icon = new GIcon();
icon.image = "http://zero-hl.ddo.jp/images/apple.png";
icon.shadow = "http://zero-hl.ddo.jp/images/apple_shadow.png";
icon.iconSize = new GSize(50, 45);
icon.shadowSize = new GSize(50, 45);
icon.iconAnchor = new GPoint(14, 45);
map.addOverlay(new GMarker(point, icon));
//]]>
</script>
7行目:ナビゲーションボタンの設置設定。途中の「Small」を「Large」にするとメモリ付のズームボタンになります。
9行目:ポイントを設置する座標を記入。中心と同じでなくてもOKです。
10行目〜:普通に初期設定のマーカーを表示してもいいんですがせっかくなのでオリジナルアイコンで。
11行目:アイコンの画像URL
12行目:アイコンの影画像URL
13行目:アイコン画像のサイズ
14行目:アイコンの影画像のサイズ
15行目:アンカーになる部分の座標(例:矢印にした場合は三角の頂点)
オリジナルマーカーや吹き出しなど、その他の設定方法は
Web::Blogoscope: Google Maps解説を参考にしてみてください。