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

広告

ここでは作成したマーカーを地図に配置し表示する方法について確認します。

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

var latlng = new google.maps.LatLng(35.630442,139.882951);
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.539001,134.228468);
var mopts = {
  positon: m_latlng,
  map: map
};
var marker = new google.maps.Marker(mopts);

2つ目の方法はMarkerクラスのオブジェクトを作成した後で、Markerクラスで用意されている「setMap」メソッドを使ってマーカーを配置する地図を指定する方法です。 

setMap(map:Map|StreetViewPanorama)

指定された地図またはパノラマ上にマーカーをレンダリングします。地図が null に設定
されている場合、マーカーは削除されます。

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

実際には次のように記述します。 

var latlng = new google.maps.LatLng(35.630442,139.882951);
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.539001,134.228468);
var mopts = {
  positon: m_latlng,
};
var marker = new google.maps.Marker(mopts);
marker.setMap(map);

マーカーのオブジェクト作成と同時に表示したい場合以外はメソッドを使ってマーカーを地図に配置して下さい。

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

地図に配置したマーカーを地図から削除するには、先ほどと同じ「setMap」メソッドを使い引数に"null"を指定して下さい。 

var latlng = new google.maps.LatLng(35.539001,134.228468);
var marker = new google.maps.Marker({
  positon: latlng,
  map: map
});

marker.setMap(null);

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

マーカーを非表示にする

地図にマーカーを配置したままで非表示にすることもできます。非表示にするにはMarkerクラスで用意されている「setVisible」メソッドを使います。 

setVisible(visible:boolean)

--

引数に"true"を指定するとマーカーが表示されます。引数に"false"を指定するとマーカーが非表示になります。 

var latlng = new google.maps.LatLng(35.539001,134.228468);
var marker = new google.maps.Marker({
  positon: latlng,
  map: map
});

marker.setVisible(false);

メソッドを使う代わりにMarkerOptionsオブジェクトの「visible」プロパティに"false"を指定しても同じです。

サンプルコード

では実際に試してみます。 

var map;
var marker1;
var marker2;

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

  var m_latlng1 = new google.maps.LatLng(33.965074,130.952654);
  marker1 = new google.maps.Marker({
    position: m_latlng1
  });

  var m_latlng2 = new google.maps.LatLng(33.958739,130.964155);
  marker2 = new google.maps.Marker({
    position: m_latlng2
  });
}

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

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

<!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 JavaScript API サンプル</title>
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="./js/code4_1.js" type="text/javascript"></script>

  </head>
  <body onload="initialize()">
    <p>Google Maps 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>

ブラウザで上記ページを開くと次のように表示されます。

p4-1

地図下にある「表示」ボタンを押すとマーカーが地図に配置されて表示されます。

p4-2

「削除」ボタンを押すとマーカーが地図から削除されます。

p4-3

( Written by Tatsuo Ikura )