Google Map API 地名検索の度にマーカーが表示されない→表示されるの繰り返し　スマホでの事象

いつもお世話になっております。
Google Maps API にて外部のJSONファイルを読み込みマーカーを表示させています。
検索フォームをから任意の座標を取得できるようにしています。
スマホ（iOS）で操作するとマーカーが表示されたりされなかったりで困っております。
ファーストビューでは表示されており、地名検索で座標が変わったマップが再読み込みされると消えてしまいます。
そこから地名を問わず再度検索し新たな座標のマップが読み込まれた際にはマーカーが表示されます。
再び検索するとまた消えてしまい…という繰り返しです。
PCでは問題ありません。

また、ファーストビュー時に表示されているエリア内での検索（東京都を表示中で新宿を検索）でしたらマーカーは表示されたままです。

検索ボタンを押した後のマップのロードが正しくできていないように思えます。
お知恵をお貸しいただけますと幸いです。

余談ですが、ページを更新すると頻繁にマップがグレー1色になってしまったり、マーカーがはじめから表示されなかったり不安定さが目立ちます。
こちらもスマホでのみの事象です。何か関係しておりますでしょうか。

var map;
var marker;
var infowindow = new google.maps.InfoWindow();
var place = '銀座';
var styles = [{省略します}];

/* 検索ボタンの挙動 */
$(function () {
	$('#searchButton').click(function (e) {
		markerCluster.clearMarkers();
		e.preventDefault();
		place = $('#searchPlace').val();
		google.maps.event.addDomListener(window, 'load', initialize(place));
	});
});

function initialize(place) {
	// インスタンス[geocoder]作成
	var geocoder = new google.maps.Geocoder();

	geocoder.geocode({
		// 起点のキーワード
		'address': place

	}, function (result, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			// 中心点を指定
			var latlng = result[0].geometry.location;
			// 初期設定オプション
			var myOptions = {
				zoom: 15,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				styles: styles
			};
			// #mapを取得し、[mapOptions]の内容の、地図のインスタンス([map])を作成する
			map = new google.maps.Map(document.getElementById('map'), myOptions);
			// 中央部座標取得
			var latlngDefault = map.getCenter();
			// フォームに座標をセット
			$('#inputLat').attr('value', latlngDefault.lat());
			$('#inputLng').attr('value', latlngDefault.lng());
			// 場所
			$('#place').text(place);
			// ドラッグで座標取得
			google.maps.event.addListener(map, 'drag', dispLatLng);

		} else {
			alert('情報を取得できませんでした。');
		}
	});
	markMultiple();
}

/* 【概要】テキストボックスフォームへ座標数値をセット、表示する */
function dispLatLng(){
// 場所
$('#place').text(place);
}

/* JSON読み込み */
function markMultiple() {
	markers = [];
	$.getJSON('jsonファイル', function (data) {
		$.each(data, function (i, obj) {
			var latLng = new google.maps.LatLng(obj.map_latitude, obj.map_longitude);
			var content = '情報ウィンドウの内容';			
			markMap(latLng, content);
		});
		//クラスタリング設定
		markerCluster = new MarkerClusterer(map, markers, {
			imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
			zoomOnClick: true,
			maxZoom: 15,
			gridSize: 20
		});
	});
}

function markMap(position, MapIcon, studioName, content) {
	var marker = new google.maps.Marker({
		position: position,
		icon: {
			url: icon.png,
			scaledSize: new google.maps.Size(25, 29),
		},
	});
	//情報ウィンドウ
	google.maps.event.addListener(marker, 'click', function () {
		infowindow.setContent(content);
		infowindow.open(map, marker);
	});
	markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize(place));

HTML

<form method="search" action="#.html">
	<input type="text" name="sp" id="searchPlace" placeholder="入力して検索してね" >
	<input type="submit" name="regist" value="検索" id="searchButton">
</form>
<div id="map"></div>

現在の進捗
マーカーのソースをinitialize内に持ってくれば表示されることがわかりました。

function initialize(place) {
	// 中心点を指定
	var latlng = result[0].geometry.location;

	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
	});

その他前後のソースは同様なので省略します

```
上記ですとマップの中心にピンが表示されます。
この部分にmarkMap内の処理を書き換えられればと試しているのですが、どう移植すれば良いか手探り状態です。

よろしくお願いいたします。

mix-peach

2018/09/25 02:28

markMultipleの処理が行われる時点で、地図の表示が終わっている確証がないので、そのあたりが原因ではないでしょうか？地図が表示された後に、マーカーの設定処理が行われるようタイミングを調整してみてはどうでしょう。

chibiyuko_0124

2018/09/25 04:09

コメントいただきましてありがとうございます。試しにinitialize内にマーカー設定を入力したところ成功しました。この部分でmarkMapの設定を記述したく現在奮闘中です。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1function initialize(place) {
2    // インスタンス[geocoder]作成
3    var geocoder = new google.maps.Geocoder();
4
5    geocoder.geocode({
6        // 起点のキーワード
7        'address': place
8
9    }, function (result, status) {
10        if (status == google.maps.GeocoderStatus.OK) {
11            // 中心点を指定
12            var latlng = result[0].geometry.location;
13            // 初期設定オプション
14            var myOptions = {
15                zoom: 15,
16                center: latlng,
17                mapTypeId: google.maps.MapTypeId.ROADMAP,
18                styles: styles
19            };
20            // #mapを取得し、[mapOptions]の内容の、地図のインスタンス([map])を作成する
21            map = new google.maps.Map(document.getElementById('map'), myOptions);
22            // 中央部座標取得
23            var latlngDefault = map.getCenter();
24            // フォームに座標をセット
25            $('#inputLat').attr('value', latlngDefault.lat());
26            $('#inputLng').attr('value', latlngDefault.lng());
27            // 場所
28            $('#place').text(place);
29            // ドラッグで座標取得
30            google.maps.event.addListener(map, 'drag', dispLatLng);
31
32            // マーカーの設置
33            markMultiple();
34
35        } else {
36            alert('情報を取得できませんでした。');
37        }
38    });
39}

単純に、マーカー設置の処理を、「地図インスタンスの作成後」に移動させれば
上手く行きそうな気がしますが、それではダメでしたか？

それと余談ですが、

jsonで取得するデータは、地図の表示領域によって変わる（これから変える？）とか
そういう予定があるのでしょうか？

コード上では、取得結果が変わるようには見えないので、もし取得結果が毎回同じなのであれば、1回取得した時点でデータを保持しておき、2回目以降はjsonファイルにはアクセスせず保持データを使いまわせばいいのではないかと思いました。

投稿2018/09/27 01:57

mix-peach

総合スコア1910

chibiyuko_0124

2018/10/01 00:49

mix-peach様おっしゃる通り地図インスタンス作成後に移動させたところ無事に表示されました。また、余談の件ですがjsonの取得データは地図の表示領域で変わる予定はありませんが、jsonファイル自体の更新が頻繁にあるので、マーカー位置など出力データは変わります。 2回目以降保持データを使いまわせるのであればそうしたいです。そのような書き方もできるのですね。あわよくば保持データの使いまわしは24時間や3日間のあいだといった期限を指定して利用したいと思っております。タイトルの件は解消しましたので、ベストアンサーとさせていただきます。本当にありがとうございます。

行動規範の内容に同意します