Google Maps APIで地図にマーカーや吹き出しをつける



Google Mapを表示して指定の位置にマーカーや吹き出しを付ける方法をご紹介します。
サンプルコードでは地図の表示の仕方は省いています。
地図の表示についてはこちらを参考にしてください。

マーカ-の表示

マーカーの表示方法とプロパティ
上記、地図のサンプルコード
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
    title: "新宿駅",
    map: map
});

マーカーのプロパティ

プロパティ説明
clickabletrueの場合、マーカーはマウス イベントとタッチ イベントを受け取ります。デフォルト値:true
cursorマウスオーバー時に表示されるマウスのカーソル。
draggabletrueの場合、マーカーをドラッグすることができます。デフォルト値:false
flattrueの場合、マーカーの影は表示されません。
icon前面のアイコン。
mapマーカーを表示する地図。
positionマーカーの位置(緯度・経度)。必須です。
shadow影の画像
shapeドラッグ/クリック用の画像マップの領域定義。
titleロールオーバーテキスト
visibletrue の場合、マーカーが表示されます。
zIndex情報ウィンドウの重なり順序を指定します。
数字が大きい方が前面に表示されます。

ポップアップ(吹き出し)

ポップアップの表示方法
上記、地図のサンプルコード
var infowindow= new google.maps.InfoWindow({
    position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
    content: "新宿駅"
});
infowindow.open(map);

ポップアップを閉じる場合は下記
infowindow.close();

ポップアップのプロパティ

プロパティ説明
content 情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。
disableAutoPan 情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。
デフォルトはfalse(自動移動)。
pixelOffset 情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。
position 情報をウィンドウの位置(緯度・経度)
maxWidth maxWidthには、情報ウィンドウの最大幅を指定します(単位:ピクセル)。
maxWidthを指定した場合、その幅よりあふれる場合は、情報ウィンドウ内に縦スクロールが表示あれます。
maxWidthを指定しない場合は、吹き出し内のコンテンツ量に合わせて自動的に伸縮されます。
zIndex 情報ウィンドウの重なり順序を指定します。
数字が大きい方が前面に表示されます。

マーカーにポップアップを付ける

上記、地図のサンプルコード
// マーカーの作成
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
	title: "新宿駅",
	map: map
});

// ポップアップの作成
var infowindow= new google.maps.InfoWindow({
		content: "新宿駅"
});

// ポップアップを地図とマーカーを指定して開く
infowindow.open(map, marker);

// ポップアップがクローズされた場合、マーカーを押されたらポップアップが開くイベントを付与
google.maps.event.addListener(infowindow, "closeclick", function() {
	google.maps.event.addListenerOnce(marker, "click", function(event) {
		infowindow.open(map, marker);
	});
});


コメントを残す