GoogleMapの複数のピンの表示ができない

前提・実現したいこと

GoogleMAp APIを使用して複数のピンの表示を行っていますが
GoogleMAPの表示処理と、ピンを立てる表示処理を分けると
うまく動作しません。

発生している問題・エラーメッセージ

Uncaught ReferenceError: marker is not definedと
Googlechromeのコンソールでエラーが発生し、
ピンの描写が行えません、

該当のソースコード

$(document).ready(function(){
initMap();
showshop();
});
function initMap() {
var centersplace = {lat: 緯度, lng: 経度};
var mapOptions = {
center: classplace,
zoom: 12.0,
scaleControl: true,
clickableIcons: false,
styles: [{
featureType: 'poi.business',
stylers: [
{ visibility: 'off' }
]
}]
};
var map = new google.maps.Map(mapArea, mapOptions);
var markerOptions = {
map: map,
position: classplace,
icon: '/map_prot/app/img/center_pin.png',
}
var marker = new google.maps.Marker(markerOptions);
}
function showshop(){
//JSON形式でお店の情報取得
$.ajax({
'cache': 'false',
'type' : 'GET',
'url' : "./select_JCode.php?" + parseInt((new Date)/1000),
'dataType' : 'json',
'data' : { jcode: p_shopcode },
'success' : function(data,state) {
var obj = data;
if(obj.length > 0){
//情報アリ
for( i = 0; i < obj.length; i++ ){
icon = new google.maps.MarkerImage("/map_prot/app/img/pin_grey.png");
// 緯度経度のデータ作成
//文字列型で取得しているので数値型へ変換
shoplat =Number(obj[i]['ido']);
shoplng =Number(obj[i]['keido']);
markerLatLng = new google.maps.LatLng({lat: shoplat , lng: shoplng });
marker[i] = new google.maps.Marker({ // マーカーの追加
position: markerLatLng, // マーカーを立てる位置を指定
map: map, // マーカーを立てる地図を指定
icon: icon,
visible:visible
});
}
}else{
alert("店舗情報が見つかりませんでした");
}
},
error:function(data){
alert("Mapの読み込みに失敗しました、\nF5ボタンを押して再度画面を読み込んでください。");
}
});
}

試したこと

Json形式で値が取れていることは確認済みです。
また、marker[i] = new google.maps.Marker({ // マーカーの追加
の箇所でどうもエラーが発生しているようですが対処方法がわからず困っています。
お知恵をお貸しください。
どうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Lhankor_Mhy

2021/05/29 07:44

map には何が入っているのですか？定義や代入をしている部分をご提示いただけますか？

Lhankor_Mhy

2021/05/29 07:46

ああ、なるほど、別の関数で定義しているのですね。問題を把握しました。

nakaka

2021/05/29 07:51

早々の確認ありがとうございます。 initMap()の中に、JSONからのデータ取得処理からピンを立てる処理までを入れ込むと問題なくピンの表示はされます。チェックボックスで最終的にはピンの表示・非表示の処理を入れ込みたいのですがそれ以前で既に詰まっておりまして。。。どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

map: map,で参照している変数mapのスコープが違うことが原因だと思います。
たとえば、こうするとどうでしょうか。

js
1$(document).ready(function () {
2    showshop(initMap());
3});
4
5function initMap() {
6//...
7    return map;
8}
9function showshop(map) {
10//...
11}