ダリの雑記：WEBプログラム版

Google Map API v3を触ってみての結構関数が変わっているのでメモ書き。

１．いろんなブログで書かれていますが、Google Map API Keyが必要なくなりました。
v3にする方法はheadタグ内に以下を記述するだけ。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

sencorはtrueかfalseを選びます。GPS機能が使える機器（iPhoneなど）で、かつ位置情報を取得したい場合は「true」、普通のパソコンで表示するような場合は「false」で良いようです。

※すでにv2の呼び出しが記述されている場合は

<script src="http://maps.google.com/maps?file=api&amp;v=2&key=（APIキー）" type="text/javascript"></script>

を削除してください。

２．マップ表示とマーカー表示の順番に注意。
マップを表示→マーカーを表示の順で記述しないと、マーカーが表示されない。
どうしてもマーカーの表示→マップの表示という順にしなくてはならない場合は、とりあえず初期値を適当に決めてマップを表示の記述をしたあと、setCenterとsetZoomで設定しなおしましょう。

/*
マップ表示の記述
*/

//マップ表示エリアのオブジェクト
var mapdiv = document.getElementById("map");

// とりあえず初期設定
LatLngCenter = new google.maps.LatLng(緯度, 経度);
zoom = ズーム値;

//マップオプション
var map_option = {
    center: LatLngCenter,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP   // マップタイプ
};

//マップ表示
var map = new google.maps.Map(mapdiv, map_option);

 

/*
マーカー表示の記述
*/

// マーカー表示
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(緯度, 経度)
});

//情報ウィンドウ描画
var popup = new google.maps.InfoWindow({
    content: "吹き出しのコメントをここに記述します"
});
  
//マーカーをクリックした場合、吹き出しを表示
google.maps.event.addListener(marker,"click",function(){popup.open(map, marker);});

 

～～～中心座標とズーム値を取得する記述～～～

 

/*
マップの中心座標とズーム値の再設定
*/

LatLngCenter = new google.maps.LatLng(緯度, 経度);
map.setZoom(zoom);
map.setCenter(LatLngCenter);

※「～～～中心座標とズーム値を取得する記述～～～」の部分に中心座標とズーム値を取得するプログラムを書いてください。

以上のように「マップの表示→マーカーの表示→マップの設定」という風にすればOKです。

今回参考にさせていただいたサイト

Google Maps API Version3 日本語ドキュメント(非公式)：該当記事「Google Maps API Version3 イベント」

同上：該当記事「Google Maps API version 3 リファレンス」

Life with IT：該当記事「TOKYO ART LIFE」のGoogle Maps API V3対応」

マツオソフトウェアブログ：該当記事「Google Maps APIのV2をV3へ移行する」

前回も同様の記事を書いたんですが、正直問題だらけであまり使い物になりません。

もっとBingっぽい挙動に近づけないものか、と調べていたら、こちらのページでいい方法を見つけました。

PHP & JavaScript Roomさんのサイト

jQueryか～。protetypeはよく使うけど、jQueryは初めて。
とりあえずサイトに載っていたスクリプトを元に改造を施してみました。

まずはサンプル

手順

１．まずはjQueryをダウンロードします。（ダウンロードサイト）

２．今回はスクリプトを外部ファイルに記述します。fade.jsというファイルをUTF-8で作成し、そこに以下のスクリプトを記述します。（ダウンロード）

$(document).ready(function () {
   
    //関数呼び出し
    fade_init();
    fade_marker();
    fade_text();
   
    //初期設定
    function fade_init(){
        fade = $('.fade_marker');
        fade.fadeTo(300, 0.2);
    }
   
    //マーカーを表示
    function fade_marker(){
        $('.fade').hover(function() {
            fade = $('.fade_marker', this);
            if (fade.is(':animated')) {
                fade.stop().fadeTo(300, 0.6);
            } else {
                fade.fadeTo(300, 0.6);
            }
        }, function () {
            fade = $('.fade_marker', this);
            if (fade.is(':animated')) {
                fade.stop().fadeTo(300, 0.2);
            } else {
                fade.fadeTo(300, 0.2);
            }
        });
    }
   
    //テキストを表示
    function fade_text(){
        $('.fade_content').hover(function() {
            fade_link = $('.fade_link', this);
            if (fade_link.is(':animated')) {
                fade_link.stop().fadeTo(300, 0.8);
            } else {
                fade_link.fadeTo(300, 0.8, function(){
                     $('.fade_text', this).css("display","block");
                });
            }
        }, function () {
            fade_link = $('.fade_link', this);
            if (fade_link.is(':animated')) {
                fade_link.stop().fadeTo(300, 0);
            } else {
                $('.fade_text', this).css("display","none");
                fade_link.fadeOut(300);
            }
        });
    }
});

jQueryでは

$(".クラス名")

でオブジェクトを取得できます。
ID名で取得する場合は

$("#ID名")

となります。

フェードについては以下の関数で行います。

• fadeTo(speed, opacity, [callback])
• fadeOut(speed, [callback])

フェードインの場合は「fadeIn(speed, [callback])」でも行えます。
しかしfadeToのほうが、最終的な不透明度を指定できるので、やや透明にしたい場合は「fadeTo」を利用してください。

３．１．でダウンロードした「jquery.js」ファイルと、２．で作った「fade.js」をheadタグで呼び出します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fade.js"></script>

４．bodyタグ内にマーカーとテキストを以下のように記述します。

<div class='fade' style='top:20px; left:20px;'>
    <div class='fade_padding'>
        <div class='fade_content'>
            <div class='fade_marker'><span>&nbsp;</span></div>
            <div class='fade_text'>
                <span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1</span>
            </div>
            <a class='fade_link' href='http://www.yahoo.co.jp'>
                <span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト1</span>
            </a>
        </div>
    </div>
</div>

ここで必要なclass名は

• class='fade'
• class='fade_content'
• class='fade_marker'
• class='fade_link'
• class='fade_text'

の以上５つです。２．のスクリプトではこのclass名を元にデータを取得しています。
フェードエリアはposition:absolute;にするので「class='fade'」のタグはstyle記述にて位置を設定してください。

５．最後にスタイルを設定します。

<style>

/* 基本設定 */
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object{
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
line-height:1.0em;
font-weight:normal;
border:0;
}

body{
background-color:#666666;
background-repeat:no-repeat;
position:relative;
}

/* マーカー表示用エリア */
.fade {
width:240px;
height:240px;
position:absolute;
background-image:url(img/fade_bk.gif);
}

.fade div.fade_padding{
padding:100px;
}

/* マーカー */
.fade div.fade_marker {
display:none;
padding:1px;
background-color:#000000;
cursor:default;
}

.fade div.fade_marker span{
display:block;
width:36px;
height:36px;
border:solid 1px #FFFFFF;
}

/* テキストブロック */
.fade div.fade_text,
.fade a.fade_link{
display:none;
position:absolute;
padding:1px;
top:100px;
left:140px;
color:#FFFFFF;
font-size:14px;
line-height:1.5em;
}

.fade a.fade_link{
background-color:#000000;
text-decoration: none;
cursor:pointer;
}

.fade a.fade_link span,
.fade div.fade_text span{
display:block;
width:196px;
padding:5px;
border:solid 1px #FFFFFF;
}

</style>

外部ファイルにする場合は、headタグで呼び出してください。

<link rel="stylesheet" href="css/style.css" type="text/css" />

なおスタイルに記述されている「background-image:url(img/fade_bk.gif);」の画像ですが、なぜかさくらインターネットだけposition:absoluteの設定にするとhoverによるフェードができなかったため苦肉の策で追加した透明gif画像です。 なくても正常に動作するようならばその記述は削除してもかまいません。

以上で完了です。

サンプル [新しいウィンドウで開く] （ダウンロード）

※サンプルでは４つのフェードマーカーを作っています。

前回の問題点であった、フェード中のhoverが対応できていない。同様に素早くマウスをhoverさせると表示がぶれる、などが一気に解決しました。

IEでも「getElementsByClassName」を利用できるようになるスクリプト「getElementsByClassName.js（ダウンロードサイト）」と、IEでも角丸やドロップシャドウが使えるようになる「PIE.htc（ダウンロードサイト）」はお互い干渉するのか、同時に使用するとIE8が落ちる・・・（IE7ではたぶん大丈夫）

IEのためのスクリプトなのに・・・IE○ね～～～～～！！

おとなしく「getElementsByClassName.js」はやめて、「prototype.js」か「jquery.js」で代用するのが良いようです。

今回は「Google Maps Anywhere」は利用せず、「Custom Field GUI Utility 3」を改造した方法を説明いたします。「Custom Field GUI Utility 3」についてはこちらのサイトをご参照ください。

「かたつむりくんのWWW」さんのサイト

この方法のネックは

• いろいろとファイルをアップロードする必要があり、手間がかかる。
• Custom Field GUI Utilityの「バージョン3.0.5」でのみ利用できる。
• テーマも改造しなければマップが表示されない
• さらっと改造したソースのため、不具合が起こる可能性あり。

などあります。

メリットは

• カスタムフィールドからマップを立ち上げられる。
• テーマ編集次第で吹き出しを自由にカスタマイズできる。

など。

簡単に設定したい場合は「WordPressのカスタムフィールドでGoogleMAPその１」の方法をどうぞ。

作業前の注意事項

Custom Field GUI Utility3.0.5がインストールされていること前提に説明していきます。
※バージョンにご注意ください
入ってない場合は、こちらのサイトからダウンロードしてインストールしてください。

また動作保証はいたしませんので、いきなり動作中の本番サーバに適応させることはやめたほうが良いかと思います。

手順

１．例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する （Google Maps API）

２．こちらのファイルをダウンロードして解凍してください。

Custom Field GUI Utility3の差し替えファイル：「cfgu.3.0.5_replace_file.zip」をダウンロード

このzipファイルを解凍すると

• cfg-utility.php
• cfg-utility.class.php
• map/map_setting.html
• map/map_setting.js

の４ファイルが入っています。

この中の 「map_setting.html」をテキストエディタで開き、５行目「（APIキー）」と書かれている部分に、１．で取得したAPIキーを上書きしてください。

３．FTPソフトにてサーバにアクセスし、「wp-content/plugins/custom-field-gui-utility/」にアップロードしてください。（４ファイルのうち、「cfg-utility.class.php」と「cfg-utility.php」は上書きで）

４．「custom-field-gui-utility」内の「conf.ini」をダウンロードし、マップ用フィールドを追加してみてください。

「type」を「mapfield」にすることにより、そのフィールドはマップフィールドになります。

例）

[Lat_Long]
fieldname = マップ座標
type = mapfield
class = post
size = 60
sample =「マップ設定」から地図情報を設定してください。

追加できましたら、「conf.ini」を元の場所にアップロードしてください。

５．WordPressの管理画面に入り、記事の追加画面、または編集画面を開いてください。下図のようなフィールドが追加されているかと思います。

６．それでは、マップの設定を行います。フィールド右にある「マップを設定」をクリックしてください。ポップアップでマップ設定ウィンドウが開きます。このウィンドウでマーカー座標、中心座標、ズームレベルを設定してください。

７．６．の作業が終わりましたら「決定」ボタンを押してください。下図のようにマーカー座標緯度、マーカー座標経度、中心座標緯度、中心座標経度、ズームレベルが数値化されカスタムフィールドに入ります。

８．これでカスタムフィールド用タグ（get post metaなど）にて座標情報を取得できるようになりました。

あとはテーマにてこの数値を取得し、マップ化すれば完了です。マップ化に必要な記述方法やファイルなどは、こちらの記事を参照してください。

• GoogleマップAPIで地図とマーカー・バルーンを表示（個別版）
• GoogleマップAPIで地図とマーカー・バルーンを表示（複数版）

これまでの記事で、「座標の取得方法」「取得した座標からマップを表示する方法」を書いてきました。とはいえ、実際に「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」：座標が入っているカスタムフィールドです。

※v3版を追加しました。

座標データを元に、公開用マップ（マーカー・バルーン付き）を表示します。今回は１マップに複数のマーカーを表示します。（まずはサンプル）

手順

１．例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが４件ほどデータを入れます。

<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"の中の座標は

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

なお、個別版では、この後に「中心座標緯度,中心座標経度,ズームレベル」が記述されていましたが、複数版ではマーカーの座標しか使用しません（記述されていても問題ありませんが反映はされません）。中心座標、ズームレベルについてはすべてのマーカーが表示されるように自動的に調整されます。

３．今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の３つです。

• 自作のマップ表示用スクリプト
  map.js（ダウンロードページへ）
• getElementsByClassNameをIEでも使用できるようにするスクリプト。
  getElementsByClassName.js（ダウンロードサイト）
  または
  prototype.js（ダウンロードサイト）
• GoogleMapAPI（キーがあればダウンロードの必要ありません）

htmlファイルのheadタグに上記のファイルを読み込んでください。（APIキーは１．で取得したものを記述してください。）

<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&amp;v=2&key=（APIキー）" type="text/javascript"></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。　

４．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload="all_marker_map('map','gmap_list')">

all_marker_mapの引数について

• 第一引数：マップを表示するタグのID（今回はmap）
• 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）

これで、マーカー・バルーン付きマップが表示できます。

５．しかし前回同様このままだとレイアウトがおかしくなります。そこでスタイルにて座標情報を非表示にし、バルーンのレイアウトを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;
}

これで複数の情報を１枚のマップに表示できます。バルーンを表示する場合はマーカーをクリックするか、左の店名をクリックしてください。

サンプル　[新しいウィンドウで開く]

今回の記事で参考にさせていただいたサイト

• チームのブログ：該当記事「Google Map APIで縮尺と位置の自動調節」
• オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」

※v3版を追加しました。

座標データを元に、公開用マップ（マーカー・バルーン付き）を表示します。（まずはサンプル）

手順

１．例によってあらかじめAPIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．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"の中の座標は

マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル

となっています。（座標についてはこちらから手動で取得できます）

３．今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の３つです。

• 自作のマップ表示用スクリプト
  map.js（ダウンロードページへ）
• getElementsByClassNameをIEでも使用できるようにするスクリプト。
  getElementsByClassName.js（ダウンロードサイト）
  または
  prototype.js（ダウンロードサイト）
• GoogleMapAPI（キーがあればダウンロードの必要ありません）

htmlファイルのheadタグに上記のファイルを読み込んでください。（APIキーは１．で取得したものを記述してください。）

<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&amp;v=2&key=（APIキー）" type="text/javascript"></script>

 ※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。

４．bodyタグのonloadにて、マップ表示用関数を呼び出します。

<body onload="map_single('map','gmap_data')">

map_singleの引数について

• 第一引数：マップを表示するタグのID（今回はmap）
• 第二引数：バルーン情報が入っているタグのID（今回はgmap_data）

これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）

サンプル　[新しいウィンドウで開く]

５．しかし、これではレイアウトが整ってませんし座標情報が表示されてしまっています。

座標情報を非表示にし、バルーンのレイアウトを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で座標取得その２」同様「オレンジ工房 ORANGE-FACTORY」さんのソースです。（結構改造してますが）

前回では、検索機能がなかったので追加しました。（まずはサンプル）

本来であれば

map.addControl(new google.maps.LocalSearch());

を追加することにより検索フォームを追加できるんですが、「Google AJAX Search APIキー」を取る必要があるし、中心座標はついてくるけど、マーカーが付いてこない。もちろんやり方はあるでしょうが、いまいちわからなかったので、こちらのサイトを参考に検索フォームを設置しました。

AjaxTowerさん「住所から座標を取得」

ソースのベースは前回同様「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースです。

手順

１．まずこちらで、Googleマップ用APIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．headタグ内に以下のスクリプトを記述してください。

※（APIキー）のところは、１．で取得したAPIキーを入れてください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&amp;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にするのを忘れずに。これがないと正常に動作しない場合があります。

３．次に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を設定してください。

サンプル [新しいウィンドウで開く]

※サンプルでは少しスタイルをつけています。

今回参考にさせていただいたサイト

• AjaxTower：該当記事「住所から座標を取得」
• オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」

（追記）検索機能をつけた「その２」を追加しました。

APIを利用したJavascriptプログラムにて、Googleマップで使用できる緯度、経度を取得し、入力フィールドに表示するプログラムです。（まずはサンプル）

なお今回は「オレンジ工房 ORANGE-FACTORY」さんのサイトのソースをベースに作らせていただきました。

手順

１．まずこちらで、Googleマップ用APIキーを取得してください。

Google MAPS API に登録する　（Google Maps API）

２．headタグ内に以下のスクリプトを記述してください。

※（APIキー）のところは、１．で取得したAPIキーを入れてください。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://maps.google.com/maps?file=api&amp;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>

３．次に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を設定してください。

これで、マーカーをドラッグ＆ドロップで動かすたびにその座標を取得できます。

また、マップをつかんで移動したり、コントローラでズームをするたびに「中心座標」や「ズーム」値を取得します。

サンプル [あたらしいウィンドウで開く]

今回参考にさせていただいたサイト

• オレンジ工房 ORANGE-FACTORY：該当記事「Google Map マーカーのドラッグドロップで緯度・経度を取得」
• Google Maps API Version 2アップグレードガイド

HTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。

ベースはASCⅡ.jpのこちらの記事を参考に作成。そこに「カラーピッカー.js」や「rgbcolor.js」を投入し、「Canvas Painter」というサイトのソースを参考にさせてもらいながら作りました。

ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分（特に不透明度・ブラシ（ぼかし））など問題点が多々ありますが、一応上げてみます。

お絵かきツールv0.5サンプル　[新しいウィンドウで開く]　（Firefox3.6以上でのみ正常動作します）

ソースはこちら

※ソースについて

今回、自分で改良したファイルは

• examples/index.html
• draw/draw.js
• rgbcolor/rgbcolor.js　（this.toRGBに引数を付け加えただけ）

だけです。

その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。

制作にあたり、今回は以下のサイトを参照させていただきました。

HTML5.jp：該当ページ「Canvas」「Javascript ライブラリー」

ASCⅡ.jp：該当ページ「HTML5のCanvasで作る、Flash不要のお絵かきツール」

もやし日記：該当ページ「色表現を変換するJavaScriptライブラリ - rgbcolor.js」