Googleマップにマーカーを設置する方法
- 公開日 : 2012年10月4日
- カテゴリ : Web制作
過去2回の記事にわたってGoogleマップを自分のホームページやブログに設置するやり方を解説し、設置自体は完了した。
過去の記事はこちら。
今回はこのマップの中央部分にマーカーを設置する方法を解説しよう。
マーカーとはこんな感じの画鋲のような画像のことをいいます。
設置のやり方解説
まず前回作成したJavaScriptファイルを開く。(前回の記事の例ではgooglemaps.jsというファイル)
今回のマーカー設置のためのコードはinitialize関数内に記述する必要があるため、
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
と、その直後の
}
の間に記述する。
これは今回の解説の中で最も重要な点であるため、記述する箇所は絶対に間違えないようにしていただきたい。
つまり完成形は以下のようになる。
function initialize() {
//地図設置
var latlng = new google.maps.LatLng(34.911086,137.159792);
var myOptions = {
zoom : 14,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//マーカー設置
var markerOptions = {
position : latlng,
map : map
};
var marker = new google.maps.Marker(markerOptions);
}
google.maps.event.addDomListener(window,'load',initialize);
//マーカー設置 と書かれているところから5行のコードが今回追加したものである。
コードの詳細説明
ではこれらの記述の解説をしよう。
前回の記事を読んだ方からすれば今回はとても簡単な記述だと思う。
position : latlng,
というのは、マーカーを設置する箇所を設定している。
ここでの変数latlngには前回の記事で解説したとおりマップを表示する座標が代入されているので、そこにマーカーを設置することになる。
map : map
というのは、マーカーを表示する地図を指定している。
と言っても今回はmapという変数に代入された地図1つしかページ内に地図が存在しないため、ここでの指定は当然だが変数mapになる。
//マーカー設置 という記述の一つ上の記述で変数mapに地図を代入してるよね。それだ。
オプション項目は以上です。
その上下1行ずつのコードの意味を一応解説しておくと、これらオプション項目をまとめて変数markerOptionsに代入し、それを基にしてマーカーを設置するオブジェクトgoogle.maps.Marker()を変数markerに代入するという記述である。
このあたりはいじる必要がないので、記述の意味まで理解しなくても問題ない。
今回は設置することを第一の目的としたために最低限のオプション項目だけの解説をしたが、これ以外にも吹き出しを表示させたりマーカーを複数設置するなど様々なオプション項目があるので、余裕のある方は検索をしてチャレンジしてみるといいかもしれない。