今回はGoogle Maps JavaScript APIで表示されるマップにマーカーを追加する方法について解説したいと思います。
まず、Google Maps JavaScript API では、マップ上の一つの場所に、画像を使用して表示するものを「マーカー」と呼びます。
このマーカーの画像は、任意の画像に変更することも可能ですが、初期設定ではGoogle Mapsでよく見かける赤いマーカーの画像（マーカーの標準画像）が使用されます。
マーカーは一種のオーバーレイです。任意の画像（カスタム画像）に設定した場合、マーカーは通常、アイコンと呼ばれるので合わせて覚えておきましょう。
このオーバーレイの概要についてはマップに追加できるオブジェクトの概要で説明していますので、そちらをご確認ください。
Google Maps APIを使って地図を作成する際には、このマーカーの追加がとても重要になってきます。
今回は、シンプルに地図上に一つのマーカーを追加する方法を確認していきましょう。
尚、マーカーには、オプションを追加したり、イベントを追加したりすることで様々な表現をすることが可能となります。
その詳細については、今後随時解説を追加していきます。また、何故、マーカーの追加が重要になるのかと言ったことに関しては、実際の活用方法を交えた上で解説した方が理解を深めることができると思いますので、今後「Google Maps APIを使った地図システムの活用方法」にてご紹介していきたいと思います。
一つ目は、マーカーの構築時にマップを指定する方法です。
二つ目は、マーカーの setMap() メソッドを使用して、マーカーをマップに追加する方法です。
positionは必須です。必ずLatLng を指定し、マーカーの初期位置を特定しましょう。
一つ目のマーカー構築時に指定するmapは任意となります。
マーカーを配置する Map を指定しますが、マーカーの構築時にマップを指定しない場合は、マップにマーカーは表示されません。
表示させたい場合は、必ずマーカーの setMap() メソッドを呼び出して、マーカーを後で追加するようにしましょう。
この二つの方法を見て分かるように、どちらも必ず配置するMapを指定する必要があります。
万が一、マーカーを追加したにも関わらずマーカーが表示されない場合は、このMapがきちんと指定されているのか確認してみましょう。
次のサンプルは、一つ目の追加方法で一つのマーカーをシンプルに地図上に追加したものになります。
ソースをそのまま使用しても表示できますので、まずはコピーしてマーカーを追加してみましょう。
サンプルページはこちら
以上でマップにマーカーを追加する方法の解説を終わります。
単純なマーカーの追加は、とても簡単にできることが分かりましたね。
マーカーには、色々なイベントと紐づけて表示させることや、ドラッグ、複数表示など、出来ることは多岐に渡りますので、 一つ一つしっかりと理解しながら進めていきましょう。
このマーカーの画像は、任意の画像に変更することも可能ですが、初期設定ではGoogle Mapsでよく見かける赤いマーカーの画像（マーカーの標準画像）が使用されます。
マーカーは一種のオーバーレイです。任意の画像（カスタム画像）に設定した場合、マーカーは通常、アイコンと呼ばれるので合わせて覚えておきましょう。
このオーバーレイの概要についてはマップに追加できるオブジェクトの概要で説明していますので、そちらをご確認ください。
Google Maps APIを使って地図を作成する際には、このマーカーの追加がとても重要になってきます。
今回は、シンプルに地図上に一つのマーカーを追加する方法を確認していきましょう。
尚、マーカーには、オプションを追加したり、イベントを追加したりすることで様々な表現をすることが可能となります。
その詳細については、今後随時解説を追加していきます。また、何故、マーカーの追加が重要になるのかと言ったことに関しては、実際の活用方法を交えた上で解説した方が理解を深めることができると思いますので、今後「Google Maps APIを使った地図システムの活用方法」にてご紹介していきたいと思います。
一つのマーカーを追加する
マーカーをマップに追加する方法は２通りあります。一つ目は、マーカーの構築時にマップを指定する方法です。
//マーカーの初期プロパティを指定
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.681167,139.767052),
map: map,
});
二つ目は、マーカーの setMap() メソッドを使用して、マーカーをマップに追加する方法です。
//マーカーの初期プロパティを指定
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.681167,139.767052),
});
marker.setMap(map);
positionは必須です。必ずLatLng を指定し、マーカーの初期位置を特定しましょう。
一つ目のマーカー構築時に指定するmapは任意となります。
マーカーを配置する Map を指定しますが、マーカーの構築時にマップを指定しない場合は、マップにマーカーは表示されません。
表示させたい場合は、必ずマーカーの setMap() メソッドを呼び出して、マーカーを後で追加するようにしましょう。
この二つの方法を見て分かるように、どちらも必ず配置するMapを指定する必要があります。
万が一、マーカーを追加したにも関わらずマーカーが表示されない場合は、このMapがきちんと指定されているのか確認してみましょう。
次のサンプルは、一つ目の追加方法で一つのマーカーをシンプルに地図上に追加したものになります。
ソースをそのまま使用しても表示できますので、まずはコピーしてマーカーを追加してみましょう。
<script>
var map;
function initMap() {
var myLatlng = new google.maps.LatLng(35.681167,139.767052);
//インスタンスを作成
map = new google.maps.Map(document.getElementById('map'), {
//地図のオプション
//初期のズームレベル
zoom: 12,
//地図の中心点
center: myLatlng
});
//マーカーの初期プロパティを指定
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
サンプルページはこちら
以上でマップにマーカーを追加する方法の解説を終わります。
単純なマーカーの追加は、とても簡単にできることが分かりましたね。
マーカーには、色々なイベントと紐づけて表示させることや、ドラッグ、複数表示など、出来ることは多岐に渡りますので、 一つ一つしっかりと理解しながら進めていきましょう。
ご質問などございましたら、お気軽に下記コメント欄にお寄せください。
※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
コメント
コメントを投稿