• 小
  • 中
  • 大

地図へマーカーを配置/削除


マーカーを地図上に配置し表示する方法について解説します。

1つ目の方法はMarkerクラスのオブジェクトを作成する時に引数に指定するMarkerOptionsオブジェクトの「map」プロパティにMapクラスのオブジェクトを指定することです。
Markerクラスのオブジェクトが作成された時点で地図上にマーカーが表示されます。


var latlng = new google.maps.LatLng(35.658425,139.737254);
var opts = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);

var m_latlng = new google.maps.LatLng(35.658704,139.745408);
var mopts = {
positon: m_latlng,
map: map
};
var marker = new google.maps.Marker(mopts);

2つ目の方法はMarkerクラスのオブジェクトを作成した後に、Markerクラスで用意されている「setMap」methodを使ってマーカーを配置する地図を指定する方法があります。
setMap(map:Map|StreetViewPanorama)
指定された地図またはパノラマ上にマーカーをレンダリングします。
地図が null に設定されている場合、マーカーは削除されます。

引数にはマーカーを表示する地図を表すMapクラスのオブジェクトを指定して下さい。methodが実行された時点で地図上にマーカーが配置され表示されます。

次のように記述します。
var latlng = new google.maps.LatLng(35.658425,139.737254);
var opts = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),opts);

var m_latlng = new google.maps.LatLng(35.658704,139.745408);
var m_pts = {
positon: m_latlng,
};
var marker = new google.maps.Marker(m_pts);
marker.setMap(map);

マーカーのオブジェクト作成と同時に表示したい場合以外はmethodを使ってマーカーを地図に配置します。

マーカーを地図から削除する

開いた情報ウィンドウは、情報ウィンドウ上に表示されている「×」マーク(閉じる)をクリックすることで閉じることができますが、スクリプトで閉じる場合は、InfoWindowクラスで用意されている「close」methodを使います。


close()
DOM 構造から削除して、情報ウィンドウを閉じます。

地図に配置したマーカーを地図から削除するには、「setMap」methodを使い引数に"null"を指定します。
var latlng = new google.maps.LatLng(35.658425,139.737254);
var marker = new google.maps.Marker({
positon: latlng,
map: map
});

marker.setMap(null);

methodを実行すると、配置されていた地図からマーカーが削除されます。

マーカーを非表示にする

地図上にマーカーを配置したまま非表示にすることも可能です。非表示にするにはMarkerクラスで用意されている「setVisible」methodを利用します。


setVisible(visible:boolean)

marker.setVisibleの引数に"true"を指定するとマーカーが表示されます。引数に"false"を指定するとマーカーが非表示になります。
var latlng = new google.maps.LatLng(35.658425,139.737254);
var marker = new google.maps.Marker({
positon: latlng,
map: map
});

marker.setVisible(false);

methodを使う代わりにMarkerOptionsオブジェクトの「visible」プロパティに"false"を指定して非表示となります。

サンプルコード

サンプル.js


var map;
var marker1;
var marker2;

function initialize() {
var latlng = new google.maps.LatLng(35.658425,139.737254);
var opts = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map
(document.getElementById("map_canvas"), opts);

var m_position1 = new google.maps.LatLng(35.658704,139.745408);
marker1 = new google.maps.Marker({
position: m_position1
});

var m_position2 = new google.maps.LatLng(35.658425,139.737254);
marker2 = new google.maps.Marker({
position: m_position2
});
}

function doOpen() {
marker1.setMap(map);
marker2.setMap(map);
}

function doClose() {
marker1.setMap(null);
marker2.setMap(null);
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<form><p>
<input type="button" id="open" value="表示"
onclick="doOpen()" />
<input type="button" id="close" value="削除"
onclick="doClose()" />
</p></form>
</body>
</html>


表示例 地図上 マーカーの表示/削除切り替え


Google Maps サンプル > 地図上 マーカーの表示/削除切り替え