LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Google Mapの利用 -(5)マーカー画像の変更-

<<   作成日時 : 2007/03/06 12:35   >>

ブログ気持玉 0 / トラックバック 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>



この状態で地図を確認してみる。

 地図表示


この要領で各地の座標やアイコンの指定をすることで自分だけのマップを作成することができる。

ここからはデータベースとの連動やデザインでより幅が広がるだろう。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Google Mapの利用 -(5)マーカー画像の変更- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる