画像(logo)

HOME/[javascript言語]グーグルマップ利用法　目次/マーカーと情報ウィンドウ

広告

[javascript言語　グーグルマップ利用法]
マーカーと情報ウィンドウ

目次へ戻る

マーカーと情報ウィンドウ

グーグルマップ上の目印、マーカーや情報ウィンドウの表示方法を解説します。

マーカー

マーカーを表示します。

画像(jsgm_3_1)

こちらになります。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja&region=JP"></script>
<script type="text/javascript">
<!--

function mapinit(){
	var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);
	var option = {
		zoom: 13,
		center: centerposition,
	};
	var map = new google.maps.Map(document.getElementById("map"),option);

	var markerOption = {
		position: new google.maps.LatLng(35.683142915306746,139.745),
		map: map,
		title: "マーカー"
	};

	var marker = new google.maps.Marker(markerOption);
}

//-->
</script>

マップ表示のスクリプトに

var markerOption = {
	position: new google.maps.LatLng(35.683142915306746,139.745),
	map: map,
	title: "マーカー"
};

var marker = new google.maps.Marker(markerOption);

こちらを加えるようなカタチになります。

座標の指定には初期座標を指定した時と同じように「new google.maps.LatLng()」関数を使って指定します。

「title」にはマウスを合わせた時に表示される文字を指定します。

情報ウィンドウ

情報ウィンドウを表示します。

画像(jsgm_3_2)

こちらになります。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja&region=JP"></script>
<script type="text/javascript">
<!--

function mapinit(){
	var centerposition = new google.maps.LatLng(35.683142915306746,139.7524109389633);
	var option = {
		zoom: 13,
		center: centerposition,
	};
	var map = new google.maps.Map(document.getElementById("map"),option);

	var infoWindowOption = {
		position: new google.maps.LatLng(35.683142915306746,139.759),
		content: "インフォ"
	};

	var infoWindow = new google.maps.InfoWindow(infoWindowOption);
	infoWindow.open(map);
}

//-->
</script>

マップ表示のスクリプトに

var infoWindowOption = {
	position: new google.maps.LatLng(35.683142915306746,139.759),
	content: "インフォ"
};

var infoWindow = new google.maps.InfoWindow(infoWindowOption);
infoWindow.open(map);

こちらを加えるようなカタチになります。

座標の指定には初期座標を指定した時と同じように「new google.maps.LatLng()」関数を使って指定します。

「content」の部分にはhtmlのタグが使えるので例えば

content: "<a href=\"index.html\">インフォ</a>"

のようにしてリンクを貼り付ける事もできます。

表示される時にマップが自動的に移動するのを防ぐにはオプションに

disableAutoPan: true

こちらを加えます。

簡単にまとめたソースになります！

グーグルマップ　サンプル２

□ページの先頭へ□

□目次へ戻る□

□HOME□

広告