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

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

新規登録して質問してみよう
ただいま回答率
85.53%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3725閲覧

Google Maps APIのMarkerClustererを呼び出されたタイミングで消す⇒再描画したい

yamaotakuro

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/04/07 04:32

Googleマップ上の複数マーカーをまとめるMarkerClustererを利用しサイトにマップを埋め込んでいます。

流れとしては
1.document.readyでajax通信しデータを受け取り描画
2.条件を選択するセレクトボックスで条件を選択しajax通信し再描画
となります。

WordPressからデータを受け取りマーカーの描画はできているのですが条件を変更した際に一度マーカーをクリアしたいのですが消えずにマーカーが追加されてしまいます。

clearMarkers()のやり方が悪いのかほかの箇所が悪いのかわかりません。

下記がコードになります。

javascript

1// マップ作成 2 // マップ中心座標設定 3 var latlng = new google.maps.LatLng(34.649388888,135.001472222); 4 5 var myOptions = { 6 zoom: 8, // マップのズーム度を指定 7 center: latlng, // 中心座標をセット 8 mapTypeId: google.maps.MapTypeId.ROADMAP // 表示するマップのタイプ 9 }; 10 var map = new google.maps.Map( document.getElementById( "div1044"), myOptions); 11 12 var markerCluster = null; 13 var infowindow = new google.maps.InfoWindow(); 14 15 16 function markerCreate(markers){ 17 if (markerCluster != null) { 18 markerCluster.clearMarkers(); 19 } 20 // console.log(markerCluster); 21 var marker_arr = []; 22 var results = []; 23 // markerClustererer用配列 24 var mcs = []; 25 26 //オブジェクトを多次元配列に 27 for(var i=0; i<markers.length; i++){ 28 29 results[i] = []; 30 31 for(j=0;j < results.length;j++){ 32 33 results[i][0] = markers[i]['title']; 34 results[i][1] = markers[i]['lat']; 35 results[i][2] = markers[i]['lng']; 36 } 37 } 38 39 // データの数だけマーカー位置と吹き出しの情報を作成 40 var marker, i; 41 for (i = 0; i < results.length; i++) { 42 marker = new google.maps.Marker( { 43 position: new google.maps.LatLng( results[i][1], results[i][2]), 44 map: map 45 }); 46 google.maps.event.addListener( marker, 'click', ( function( marker, i) { 47 return function() { 48 infowindow.setContent( results[i][0]); 49 infowindow.open( map, marker); 50 } 51 })( marker, i)); 52 mcs.push( marker); 53 } 54 55 // markerclusterのオプション 56 var mcOptions = { gridSize: 50, maxZoom: 15}; 57 58 // markerclusterを表示 59 var markerCluster = new MarkerClusterer( map, mcs, mcOptions ); 60 61 } 62 63 function readyAjax() { 64 $.ajax({ 65 url : AJAX2.endpoint, 66 type : 'POST', 67 data : {action: AJAX2.action,}, 68 success : function(response){ 69 markerCreate(response); 70 } 71 }); 72 } 73 74 function trgAjax(select1,select2) { 75 $.ajax({ 76 url : AJAX.endpoint, 77 type : 'POST', 78 data : {action: AJAX.action,species: select1 ,store: select2}, 79 success : function(response){ 80 markerCreate(response); 81 } 82 }); 83 } 84 85 function search(){ 86 $('#search_btn').on('click',function(){ 87 var species = $('#species').val(); 88 var store = $('#store').val(); 89 trgAjax(species,store); 90 }); 91 } 92 search(); 93 readyAjax();

以上、何卒よろしくお願い申し上げます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

function markerCreate(markers){ の中で var markerCluster をしてしまっているため、if (markerCluster != null) { が毎回 null になってしまうのでは。

JavaScript

1// // markerclusterを表示 2// var markerCluster = new MarkerClusterer( map, mcs, mcOptions ); 3// ↓ 4 // markerclusterを表示 5 markerCluster = new MarkerClusterer( map, mcs, mcOptions );

投稿2016/04/07 06:44

kei344

総合スコア69357

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

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

yamaotakuro

2016/04/07 06:52

見落としてました。。 助かりました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問