Google Map 埋め込み 覚書

今回, Webページ作成にあたって, Google Mapの埋め込みを行いました.
(cf. 大学周辺情報)

それに関しての覚書です.
箇条書きにすると...

1. 最短経路探索(アクセス時刻): Google Map API v2
2. マーカーの設置
3. マーカーの変更
4. マーカークリック時にInfoWindow表示
5. マーカーの作成(png透明化について)

ほとんどコピペで終わらせているので, 内容はあまり理解しておりません.

1. 最短経路探索(アクセス時刻): Google Map API v2

これは一番簡単です. まず, 最新のGoogle Mapを使っている場合, 従来のマップに戻します.

すると以下の画面が表示されますので, 「ルート・乗り換え案内」を押します.

次に, 埋め込みたい経路などを選択します.
(ここでは, 名古屋駅から名古屋大学駅へ, 公共機関を使ってのアクセスにしました.)

あとは, 共有アイコン(?)を押せば, 埋め込み用のタグがでてきます.
このままでもいいですが, 「埋め込み地図のカスタマイズとプレビュー」を押します.

上のときとは違う経路が表示されますが, これはGoogleがその都度最短経路探索をしてくれているからです. (これを使用したくないときは, もとの経路探索で設定をすればOKです.)

ここで, 地図のサイズなどをカスタマイズすれば, 自動で下のタグも変更されるので, あとはそのコピペをすればOKです.

2. マーカーの設置

これは, Google Mapを埋め込んで, 周辺情報を載せることを前提に行いました.

例えば, 以下のような埋め込みとマーカーの設置を行いました.

(ごちゃごちゃしてしまっていて申し訳ない.)

さて, これのタグです.

<script type="text/javascript">
function attachMessage(marker, msg) {

google.maps.event.addListener(marker, 'click', function(event) {

new google.maps.InfoWindow({

content: msg

}).open(marker.getMap(), marker);

});

}

// 位置情報と表示データの組み合わせ

var data = new Array();//マーカー位置の緯度経度

data.push({position: new google.maps.LatLng(35.155236, 136.965863), icon: 'img/green.png', content: 'FamilyMart'}); data.push({position: new google.maps.LatLng(35.154043, 136.963226), icon: 'img/lightblue.png', content: 'FamilyMart'});

(以下同じ...)

var myMap = new google.maps.Map(document.getElementById('map'), {

zoom: 16 ,//地図縮尺

center: new google.maps.LatLng(35.154618, 136.966700),// 地図の中心点 (名古屋大学駅)

scrollwheel: false,

mapTypeId: google.maps.MapTypeId.ROADMAP

});

for (i = 0; i < data.length; i++) {

var myMarker = new google.maps.Marker({

position: data[i].position,

map: myMap,

icon: data[i].icon

});

attachMessage(myMarker, data[i].content);

}

</script>

一部省略しました. もちろん, これだけではGoogle Mapの埋め込みはできません.
ほとんど次のサイトを参考にしたらできますので, そちらを参考にしてください.

google map api v3で、1つの地図に複数のマーカー+吹き出しを表示(元営業マンのWEB研究メモ)

解説はあまり必要ないと思いますが, 自分の覚書のためにも少し書いておきます.

大雑把に説明すれば, 最初の2-8行目で, マーカーの情報を呼び出しています.

次のブロックで, それぞれのマーカーの情報(緯度経度情報, アイコン情報, InfoWindow情報)を書いています.

その次に, Google Mapの基本情報(地図の尺図, 中心点, スクロール情報, 地図タイプ)を書いています.

最後に, マーカーの情報をfor文で投げつける作業文です.

細かいところは, 一応以下のようにしてまとめました.

3. マーカーの変更

上の「元営業マンのWEB研究メモ」のタグをそのまま使うと, マーカーは標準のものになります.

Google API v2であれば, iconからgreenなどを選択すると, そのままアイコンの変更ができたみたいです(?)が, v3では出来ないようだったので, 自作する or 配布されてるものを使うことにしました.

まずは変更する方法ですが, 私は

逆引きGoogle Maps APIリファレンス ver 3のページ「独自のマーカー(カスタムマーカー)を表示する」や,
マーカー、アイコン(php & javascript room)を
参考にしました.

icon: "アイコンアドレス"

で追加できるようです. なので, それぞれの場所でマーカーを変更したかったので,

datapush ({... icon: 'アイコンアドレス', ...})

とし, 呼び出しの for文 var myMarker内で

icon: data[i].icon

とすれば大丈夫です.

ちなみにマーカーは, 自作してももちろん構いませんが,

Markers Google Maps icons | Map Icons Collection や WordPressにGoogle Maps API V3 !がオススメです.

(ちなみに, 前者はアイコンの色も変更できます.)

(ちなみに, こんなページもあるみたいです. Google Maps API Projects)

4. マーカークリック時にInfoWindow表示

マーカークリック時の動作は, 最初の3-4行目で指定しています.

表示させるInfoWindowは, それぞれのマーカーで変更したかったので,

datapush({... ... content:'メッセージ'})

で指定して, 呼び出しを5行目で

content: msg

でしてあります.
(これは, 2行目のmarker, msgが下から3行目のmyMarker, data[i].contentに対応してます.)

ちなみに, "クリック時"ではなく, 最初から表示させたい場合は, 3行目を無くせばOKですね.

5. マーカーの作成(png透明化について)

今回, \( \zeta(7) \)と言うものを地図に表示させたかったので, アイコンを作る必要がありました.

以下を参考にして, 画像の透明化を行いました.

Excelを使うなんて!! と思ったので, 是非参考にしてみてください.

エクセル・ペイントで透明背景画像、透過GIF、透過PNGを作る方法(ぴちょんくん的うるるとさらら人達のブログ)

(すべてが終わってから気付きました... Google API で文字をそのままピンに入れることもできるらしいです.(涙) 参考: Image charts(Google Developers))
---

こんなかんじで, ほとんどコピペ作業だけで周辺情報を載せることができました.

Google Mapの埋め込みは, 前にも少しだけ大学の授業でも学んだのですが, なかなかできることが多そう.

例えば, Google DevelopersのGoogle Map API v3のページや菊池さんの工作室のページ(これ小学生か中学生の頃から見覚えが!! まだまだ現役なのか!)を見ると感じます.

真剣に勉強を始めるには, ちょっと時期が... と思っていたらいつまでたってもしなさそうだなぁ...

これを使う職に就けば, またあれなんだろうけど.