質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

5462閲覧

setMap(null)でマーカーを削除することができない

pegy

総合スコア243

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/10/17 03:44

下記のコードで、$('.btn').on('click',function()において
setMapメソッドですべてのマーカーを削除したいのですが、削除されずまたconsole常にも特段の
エラーが出力されません。本メソッドについてはこちらの記事を参考に学びました。

原因がわからないため、どなたか問題点等のアドバイスをいただけますでしょうか?

*一部、PureJavascriptとJqueryが混ざっている点については一旦ご放念いただければと思います。
もちろん、以下のようなコードでも同じ症状が起きております。

<div class="btn" onclick="closeMarker">削除する</div> function closeMarker(){ //同じ処理 }

よろしくお願い申し上げます。

html

1<body onload="initialize()"> 2 <div id="map" class="web_map"></div> 3 <div class="btn">削除する</div> 4</body>

javascript

1var map; 2var marker = []; 3var infoWindow = []; 4var markerData = [ 5 { 6 lat:35.xxxxxx, 7 lng:139.xxxxxx, 8 icon:"./z_icon/0002_k.png", 9 contents: '<span class="sample">hoge</span><br><a href="https://www.yahoo.co.jp/">Link</a>' 10 },{ 11 lat:35.xxxxxx, 12 lng:139.xxxxxx, 13 icon:"./z_icon/0003_c.png", 14 contents: '<span class="sample">fuga</span><br><a href="https://www.yahoo.co.jp/">Link</a>' 15 } 16] 17 18function initialize() { 19 var latlng = new google.maps.LatLng(35.680552, 139.766923); 20 var opts = { 21 zoom: 11, 22 center: latlng, 23 mapTypeId: google.maps.MapTypeId.ROADMAP 24 }; 25 map = new google.maps.Map(document.getElementById("map"), opts); 26 27 28for (var i = 0; i < markerData.length; i++) { 29 marker[i] = new google.maps.Marker({ 30 position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}), 31 map: map, 32 icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41)) 33 }); 34 infoWindow[i] = new google.maps.InfoWindow({ 35 content:markerData[i]['contents'] 36 }); 37 markerEvent(i); 38 function markerEvent(i) { 39 marker[i].addListener('click', function() { 40 infoWindow[i].open(map, marker[i]); 41 }); 42 } 43 } 44} 45 46$(function() { 47 $('.btn').on('click',function(){ 48 for (var i = 0; i < 3; i++) { 49 marker[i] = new google.maps.Marker({ 50 position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}), 51 map: map, 52 icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41)) 53 }); 54 marker[i].setMap(null); 55 } 56 }) 57})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

1

ベストアンサー

js

1// ↓ 別のマーカーで前のマーカーを上書きしているので削除されない 2// marker[i] = new google.maps.Marker({position: new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}), map: map, icon:new google.maps.MarkerImage(markerData[i]['icon'],null,null,null,new google.maps.Size(41, 41)) }); 3 marker[i].setMap(null);

投稿2019/10/17 04:47

kei344

総合スコア69348

pegy👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2019/10/17 08:26

コメントをいただきありがとうございます。 同じオブジェクトのマーカーを表示したり非表示にしたりするのですね。 大変助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。