月別: 2013年8月

google map でマーカーと情報ウインドウの連動
#08 マーカーと情報ウィンドウの連動
http://dotinstall.com/lessons/basic_google_maps/3508
を参考に
マーカーを地図上に表示させ、クリックしたら情報ウィンドウが開くように設定
マーカーと情報ウインドウの組み合わせは
多く使われていて地図上のマーカーをクリックしたら情報ウインドウがでるようにする
まず、情報ウインドウの作成
ただし　position はクリックしたときの場所にするので
今回は省略
var infoWindow = new google.maps.InfoWindw({
content: ‘渋谷あたり’
});:
content: ‘渋谷あたり’
としたので、情報ウインドウにはこのメッセージがでる
次に、マーカーを作成
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
position: map.getCenter(),
で地図の中心に設定
map: map
は
var map で指定したマップ
そして、このマーカーに対して
クリックしたら infoWindow を表示するイベントを設定
google.maps.event.addListener(marker,’click’,function(){
infoWindow.open(map,marker);
});
marker,’click’,
と指定したので
marker をクリックしたら
infoWindow.open(map,marker);
が実行される
open() の第2引数に
marker を指定したことにより
marker の位置に情報ウインドウを表示するようになる
使い道として多いのが
web api で建物や施設情報、飲食店を取得
地図にアイコンで表示して
クリックしたら詳細情報ウインドウ表示というもの
あと場所を指定するときには
getCenter() 以外には
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Map
に便利なメソッドがある

google map で情報ウインドウ表示
#07 情報ウィンドウを表示する
http://dotinstall.com/lessons/basic_google_maps/3507
を参考に
地図上に吹き出しのような情報ウィンドウを表示
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#InfoWindow
が公式リファレンス
情報ウインドウを作成するには
var infoWindow = new google.maps.Inf
oWindow({
content: ‘渋谷のあたりだよ’,
position: map.getCenter()
});
infoWindow.open(map);
で表示できる
content: ‘渋谷のあたりだよ’,
というように
content : には
情報ウインドウに何を表示するか指定する
指定できるのは
普通の文字列、
HTMLタグを含む文字列、
)HTML要素
もしHTML要素なら
content: document.getElementById(‘要素ID’),
というようにする
content: ‘<a href=”http://dotinstall.com/lessons”>ドットインストール</a>’
とすればリンクの吹き出しができる
これによりお店リンク地図なども作成できる
position: map.getCenter()
というように
position: で緯度経度の指定
今回は、getCenter() で、表示している地図の中心座標を取得
マーカー作成のときとの違いは
open() を使って表示することになる
infoWindow.open(map);
で情報ウインドウを表示できる
引数の map は
var map = new google.maps.Map(document.getElementById(‘map’), options);
で設定した変数
これで保存して再読み込みすると
マップの上に吹き出しのような
情報window が現れる
これを使うといろいろできそう

google map のマーカーオプション変更
#06 マーカーのオプションを変更する
http://dotinstall.com/lessons/basic_google_maps/3506
を参考に
アイコンを変更したり
マーカーをドラッグ可能にしたりと
オプションを変更することでより利用しやすくする
アイコンの変更は地図アプリなどに使えそう
Markerが取り得るオプションについては
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#MarkerOptions
を参照
この中の
draggable はドラッグできるかどうかを設定する
デフォルトは false
true にするとドラッグできる
var marker = new google.maps.Marker()
の中で
draggable: true
と追記すれば
ドラッグ可能になる
アイコンの変更は
icon: new google.maps.MarkerImage(‘画像ファイル名’);
とする
ちなみに、動画ではすでにアイコンを用意してあるけど
自分の環境ではまだないので
http://toshiiy.blog22.fc2.com/?tag=%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3
を参考にフリー画像をみてみました
その中で、今回は
商用利用可能なフリー素材を効率よく収集する方法
http://toshiiy.blog22.fc2.com/blog-entry-73.html
も
見ましたが、最終的には
http://www.tutorial9.net/downloads/designer-icons-professionally-hand-crafted-free-icon-set/
からダウンロードしてきたものを
cd ダウンロード/
unzip Tutorial9-Designer-Iconset.zip
cp tutorial9_pencil.png /var/www/gmap/
でコピーして
icon: new google.maps.MarkerImage(‘tutorial9_pencil.png’),
としました
注意点としては
画像サイズの補正はしてくれないので
アイコンサイズ画像を用意する必要があること
これは、画像を作成して
PHPで作る「画像掲示板」
のようなもので、サイズ補正したほうが
効率的かもしれない
title を設定すると
マーカーをマウスオーバーしたときにメッセージがでるようになる
もし、マーカーをマウスオーバーしたとき
マーカーですよ！
と表示するなら
title: ‘マーカーですよ！’
とする

google map をクリックしてマーカー表示
#05 クリックしてマーカーを表示する
http://dotinstall.com/lessons/basic_google_maps/3505
を参考に
地図をクリックしたところにマーカーを配置する
今後、アプリとかでなにかコメント書き込みに使えそう
クリックしてマーカーを表示するには
イベントをつける
google.maps.event.addListener()
を設定することでイベントを追加できる
google.maps.event.addListener(
対象,
動作,
実行内容
)
となる
google.maps.event.addListener(
map,
‘click’,
function(event){
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
クリックされたときに
event に緯度経度が格納されるので
position : の指定には
event.latLng
とすることで、クリックした場所の緯度経度となる
map: map
のところは
マーカー表示する対象なので、
これは中心にマーカーを書いたときと一緒

google map へマーカー表示
#04 マーカーを表示する
http://dotinstall.com/lessons/basic_google_maps/3504
を参考に
google map にマーカーを表示する
今後、いろいろとマーカーを変えることで活用できそう
マーカーを作成する際のオプションや設定できるイベントなどは
マーカーを表示するには
var marker = new google.maps.marker({
position: map.getCenter(),
map: map
});
必須項目は
position つまりマーカーの位置
position は緯度経度を指定するけど
変数に格納して
position: latlng
というようにしてもOK
今回の
map.getCenter()
にすると
var options で設定した地図の
中心座標の緯度経度を取得できる
ちなみに、
var options の設定は
var options ={
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map: map
は、マーカーを表示する領域の指定
構文にすると
map: 表示する場所
という意味
今回、表示する場所がmap なのは
var map = new google.maps.Map(document.getElementById(‘map’),options);
で
変数 map だから
今回の getCenter() などについては
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#Map
を参照
ちなみに、
getZoom() はズームレベルを取得する

Google Map のオプション変更
#03 地図のオプションを変更する
http://dotinstall.com/lessons/basic_google_maps/3503
を参考に
地図の設定を変更する
動画中に登場する MapOptions オブジェクトの navigationControl プロパティはすでに廃止されているということなので注意
地図のオプションについての公式ドキュメントは
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#MapOptions
を参照
今回は
zoom の値を変更して
ズームレベルを変更
例えば
zoom: 15.
を
zoom: 5
にすると、広域地図になる
この数値を小さくすれば、どんどん広域となり
数値を大きくすればズームされていく
オプションの中で英文になるけど
Required
とかかれているのが必須指定項目
Required
は英語で必須という意味
このオプションで必須、つまり Required が
ついているのが
center
mapTypeId
zoom
の３つとなる
また、
mapTypeId も変更すると表示される地図が変わる
これについては
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeId
を参照
mapTypeId: google.maps.MapTypeId.ROADMAP
だと、普通の地図だけど
ROADMAP　を　SATELLITE
にすれば、航空写真になる

Google Map の表示
#02 最初の地図を表示させよう
http://dotinstall.com/lessons/basic_google_maps/3502
を参考に
Google Map を表示してみる
APIリファレンスは
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1
そして編集するのは index.html の
script タグの中
ドットインストールの解説によると
英語では南北の緯度のことをlatitude、
東西の経度のことをlongitudeと言うので、
Google Maps APIでは「latlng」という表現が
使われるということ
パラメータは
英語の意味がわかると意外とわかりやすいかもしれない
地図を表示するには
まず緯度経度を指定する
vat latlng = new google.maps.LatLng(35.66, 139.69);
これは渋谷の座標
次にオプション
これにはオプションとはいっても必須項目がある
これは他のAPIでも、ものによっては
必須項目がある
zoom: 15
でズームレベルを１５に
center: latlng,
これで地図の中心座標
大抵の場合、
変数にしたものを指定する
今回なら
var latlng　で座標を格納して、これを指定している
mapTypeId: google.maps.MapTypeId.ROADMAP
これは、表示するマップの種類
Yahoo地図の場合、地下などの指定もできる
mapTypeId については
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#MapTypeId
にあり
ROADMAPは、普通の地図になる
そして、地図を表示するには
var map = new google.maps.Map(document.getElementById(‘map’), options);
で表示する
new google.maps.Map(
表示する場所,
オプション
}
となる
document.getElementById(‘map’)
なので id=map のところに
地図表示
options
なので、var options
で指定した mapの設定になる
new google.maps.Map()は
google のAPIの関数

Google Map API について

https://developers.google.com/maps/documentation/javascript/?hl=ja&csw=1
にリファレンスがある
とりあえず
#01 ひな形ファイルを作ろう
http://dotinstall.com/lessons/basic_google_maps/3501
から参考にやってみる
もし、バージョン違いでできないのなら
更新をまって、先に enchant.js を行う予定
google map を使うには
<script src=”http://maps.google.com/maps/api/js?sensor=true&language=ja”></script>
でライブラリを読み込む
sensor=true にすると
位置情報を使う
language=ja
は、日本語という意味
地図を表示する領域は
div で指定
<div id=”map”></div>
として id=map にしておき
表示する地図のサイズをCSSで設定
<style>
#map{
width:100%;
height:100%;
}
</style>
#はcss では id のこと
つまり
id=map のところのスタイルを指定している
ここまでの注意点として
sensor パラメータは必須で
今後制御する script 要素は
地図を表示する div 要素の後に書くということ