Google Mapの利用 -(5)マーカー画像の変更-
<<
作成日時 ： 2007/03/06 12:35
>>
トラックバック 0 / コメント 0
先日より試験的に使っている"Google Map"。
現在、ツールボタンやスライダーを設置し大阪駅が表示されるようにしている。
前回は地図上にアイコンを表示し、クリックするとコメントが表示されるようにした。
このアイコンは"Google Map"にあらかじめ用意されているものだが、自分が作成した画像に差し替えることが可能だ。
これもHTMLのソースに手を加えることで実現可能だが、加えて画像を用意する必要がある。
画像を用意するときの注意点として、背景色が挙げられる。
正方形や長方形など四角形であれば地図上に設置しても違和感がないが、曲線や鋭角のある図形の場合は画像の余分なところが地図の上にかぶさり違和感がある。
そこで、背景色が透明にすることができるGIFかPNG画像を用意する。
ちなみにGIFの場合、グラーデションがキレイに再現されないのでここではPNGを利用する。
作成ソフトは"Fireworks"を利用する。
上のmark_00がアイコンで下のsha_00がアイコンの影の画像となる。
これを背景色を透明にしてPNG保存する。
HTMLファイルと同階層に画像を設置してもよいが、管理しやすいように画像を格納する"img"フォルダを作成しそこに保存する。
次に前回のソースの"マーカー"の部分を修正する。
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
//▼マーカー
var marker = new GMarker(new GLatLng(34.702777,135.495179));
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);
//▲マーカー
}
}
//]]>
</script>
↓
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl()); //上下左右の移動ボタンと拡大・縮小スライダーを表示
map.addControl(new GMapTypeControl()); //航空写真・地図の切り替えボタンを表示
map.setCenter(new GLatLng(34.702495,135.49417), 15); //場所と縮尺を指定
//▼マーカー
var myicon = new GIcon();
myicon.image="img/mark_00.png"; //マーカー画像
myicon.shadow="img/sha_00.png"; //マーカー影
myicon.iconSize = new GSize(30,36); //マーカーサイズ
myicon.shadowSize = new GSize(50,36); //影サイズ
myicon.iconAnchor = new GLatLng(1,23); //マーカー位置
myicon.infoWindowAnchor = new GLatLng(10,10); //コメント位置
var marker = new GMarker(new GLatLng(34.702777,135.495179),myicon);
GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml("大阪駅");
});
map.addOverlay(marker);
//▲マーカー
}
}
//]]>
</script>
この状態で地図を確認してみる。
この要領で各地の座標やアイコンの指定をすることで自分だけのマップを作成することができる。
ここからはデータベースとの連動やデザインでより幅が広がるだろう。
|
