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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Q&A

0回答

398閲覧

GoogleMapマーカークラスタの挙動について

yutabo

総合スコア8

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

0グッド

0クリップ

投稿2018/01/24 04:31

###前提・実現したいこと
以下の内容でgooglemapを利用したシステムを作りました
1.GET値から範囲を取得してPHPで該当範囲の情報を
含むxmlデータを作成
2.取得したxmlデータを元にクリック情報を含むマーカーを配置
※スクロールや拡大縮小で1の情報を再取得
3.マーカークラスタを作成

動作を確認すると1,2までの場合は再読込やマーカーをクリック
した時の動作に問題ありませんでした。
しかし3(コードでいうと73行目)を足すと挙動がおかしくなります。
・マーカークラスタをクリックした後にマーカーをクリックすると
インフォウインドーが表示されない、違うマーカーに表示される。
・画面スクロール後の再読込後にマーカーをクリックすると
インフォウインドーが表示されない、違うマーカーに表示される。

マーカークラスタを使用した場合でも問題ない動作にしたいです。

###該当のソースコード

php

1<?php 2<!DOCTYPE html> 3<head> 4<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 5<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6<title>地図データの表示</title> 7 8<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> 9<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=hoge"></script> 10<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 11 12 <script type="text/javascript"> 13 var currentInfoWindow 14 var marker_ary = new Array(); 15 var mcs = []; 16 17function initialize() { 18 uluru = {lat: lat, lng: lng}; //GETから取得した範囲をセット 19 20 map = new google.maps.Map(document.getElementById('map'), { 21 center: uluru, 22 zoom: 13 23 }); 24 25 //最大ズームレベルの設定 26 google.maps.event.addListener(map, 'zoom_changed', function() { 27 if ( map.getZoom() < 13 ) { 28 map.setZoom(13); 29 } 30 }); 31 32 //idle時のイベント 33 google.maps.event.addListener(map, "idle", function() { 34 setPointMarker(); 35 }); 36} 37 38 function setPointMarker(){ 39 //リストの内容を削除 40 $('#pointlist > ul').empty(); 41 42 MarkerDelete(); 43 mcs = []; 44 45 //地図の範囲を取得 46 var bounds = map.getBounds(); 47 map_ne_lat = bounds.getNorthEast().lat(); 48 map_sw_lat = bounds.getSouthWest().lat(); 49 map_ne_lng = bounds.getNorthEast().lng(); 50 map_sw_lng = bounds.getSouthWest().lng(); 51 52 downloadUrl(指定したURLからXMLファイルを取得, function(data){ 53 var xml = data.responseXML; 54 55 var markers = xml.documentElement.getElementsByTagName('marker'); 56 Array.prototype.forEach.call(markers, function(markerElem){ 57 58 var name = markerElem.getAttribute('name'); 59 60 MarkerSet(parseFloat(markerElem.getAttribute('lat')),parseFloat(markerElem.getAttribute('lng')),'<div class="map">' + name + '</div>'); 61 62 //リスト表示 63 var marker_num = marker_ary.length - 1; 64 //liとaタグをセット 65 loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(name)); 66 //セットしたタグにイベント「マーカーがクリックされた」をセット 67 loc.bind('click', function(){ 68 google.maps.event.trigger(marker_ary[marker_num], 'click'); 69 }); 70 //リスト表示 71 $('#pointlist > ul').append(loc); 72 }); 73 var markerCluster = new MarkerClusterer( map, mcs,{imagePath:'./images/m'} ); 74 }); 75 76 } 77 78 function MarkerSet(lat,lng,text){ 79 var marker_num = marker_ary.length; 80 var marker_position = new google.maps.LatLng(lat,lng); 81 var markerOpts = { 82 map: map, 83 position: marker_position 84 }; 85 marker_ary[marker_num] = new google.maps.Marker(markerOpts); 86 87 mcs.push(marker_ary[marker_num]); 88 if(text.length>0){ 89 var infoWndOpts = { 90 content : text 91 }; 92 var infoWnd = new google.maps.InfoWindow(infoWndOpts); 93 google.maps.event.addListener(marker_ary[marker_num], "click", function(){ 94 //先に開いた情報ウィンドウがあれば、closeする 95 if (currentInfoWindow) { 96 currentInfoWindow.close(); 97 } 98 //情報ウィンドウを開く 99 infoWnd.open(map, marker_ary[marker_num]); 100 //開いた情報ウィンドウを記録しておく 101 currentInfoWindow = infoWnd; 102 }); 103 } 104 } 105 106 //マーカー削除 107 function MarkerDelete() { 108 if(marker_ary.length > 0){ 109 //マーカー削除 110 for (i = 0; i < marker_ary.length; i++) { 111 marker_ary[i].setMap(); 112 } 113 //配列削除 114 for (i = 0; i <= marker_ary.length; i++) { 115 marker_ary.shift(); 116 } 117 } 118 } 119 120 </script> 121</head> 122<body onload="initialize()"> 123<div id="pointlist" style="width:20em;float:left;"> 124 <ul> 125 <li>地点リスト</li> 126 </ul> 127</div> 128<div style="float:left;"> 129 <div id="map" style="width:700px; height:700px"></div> 130 <div id="result"></div> 131</div> 132</body> 133</html>

###試したこと
デバッグをすると68行目のクリックイベントのイベントでセットした
つもりのインデックスからずれてしまうのが原因のようです。
マーカークラスタを追加すると、なぜこのような挙動になるのかが
分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問