IT Design 旅 PetLife Life RenojiStock AboutUs
IT Memo >>> Google Map / グーグルマップ >>> 【Google Map】地図上にマーカーを表示する

【Google Map】地図上にマーカーを表示する

【Google Map】
地図上にマーカーを表示する




分かりやすいように、地図上にマーカーを付ける方法。

Google Map API の マーカーアイコン
https://developers.google.com/chart/image/docs/gallery/dynamic_icons?hl=ja&csw=1


Markerクラスのコンストラクタ

Marker(option)


記述例

var marker = new google.maps.Marker({position:new google.maps.LatLng(35.681382,139.766084),map:mapCanvas});

option=Markerクラスを初期化するためのオプションを設定可能。省略可能。
省略した場合、「position」「map」プロパティの２つを設定しないと地図上に表示されない。
「setPosition()」「setMap()」メソッドで設定することも可能。


「Marker」クラスのプロパティ

map 地図に表示するか、しないかを指定。
表示する場合は、「Mapクラスのインスタンス名」を指定。
表示しない場合は、「null」を指定。
marker.setMap(mapCanvas); ----->マーカーを地図に表示。
marker.setMap(null); ----->マーカーを地図から消す。
position
clickable 「true」に設定すると、クリックできるようになる。デフォルトは「true」。
draggable 「true」に設定すると、ドラッグできるようになる。デフォルトは「true」。
flat 「true」に設定すると、マーカーの陰を表示しない。デフォルトは「true」。
icon マーカーのアイコン画像を指定。
URLによる指定。
MarkerImageによる指定。
raiseOnDrag 「true」に設定すると、マーカーをドラッグするときに、マーカーを地図から浮かせる。デフォルトは「true」。
shadow マーカーのアイコン画像にシャドウを設定するかの設定。
title マーカー上にカーソルを合わせたときに表示されるマーカータイトル。
visible 「false」に指定すると、一時的に地図上に表示されなくなる。
「true」を設定すると再び表示される。


プロパティの設定・参照する方法

setプロバティ名()
getプロパティ名()


マーカーの削除方法


マーカーを、「非表示にする方法」と「削除する方法」がある。


marker.setMap(null);