google maps api でマーカーが表示されない原因と解決策を教えてください！

Question

google maps api で周辺の飲食店情報を取得しようとしています。
位置情報取得した後のマップは表示されるのですが
ポインターが表示されません。

どうやら変数userPositionに値が入っていないようです。
geolocationでは値が代入され動いているのですが、
それ以降は値が入っていません。

原因や解決策を教えてください！！

var takeoutVal = 0;
var distanceVal = 400;
var genreVal = 0;

function tChange() {
  takeoutVal = document.getElementById("takeout").value;
};
function dChange() {
  distanceVal = document.getElementById("distance").value;
};
function gChange() {
  genreVal = document.getElementById("genre").value;
};
var map;
var userPosition;

//==================================================


// mapの表示 
function initMap() {
  'use strict';
  var mapCanvas = document.getElementById('map');

  // Geolocation
  if (!navigator.geolocation) {
    alert('Geolocation not supported');
    return;
  }
  navigator.geolocation.getCurrentPosition(function(position) {
    userPosition = {lat: position.coords.latitude, lng: position.coords.longitude}
    map = new google.maps.Map(mapCanvas, {
      center: userPosition,
      zoom: 15,
      radius: distanceVal,
      disableDefaultUI: true,   //地図切り替え、ズームボタンなどを無効化する
      fullscreenControl: true,//全画面表示コントロールは表示する
      fullscreenControlOptions: { //全画面表示コントロールの位置
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
      },
    });
  }, function() {
    alert('Geolocation failed!');
    return;
  });

  //情報ウィンドウのインスタンスの生成（後でマーカーに紐付け）
  var infowindow = new google.maps.InfoWindow();
    
  //PlacesService のインスタンスの生成（引数に map を指定）
  var service = new google.maps.places.PlacesService(map);
  
 
  service.nearbySearch({
    location: userPosition,  //検索するロケーション
    radius: distanceVal,  //検索する半径（メートル）
    openNow:true,
    type: ['food']  //タイプで検索。文字列またはその配列で指定
  }, callback);  //コールバック関数（callback）は別途定義
  
   function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      //results の数だけ for 文で繰り返し処理
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }
  
  //マーカーを生成する関数（引数には検索結果の配列 results[i] が入ってきます）
  function createMarker(place) {
    //var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location  //results[i].geometry.location
    });
 
    //マーカーにイベントリスナを設定
    marker.addListener('click', function() {
      infowindow.setContent(place.name);  //results[i].name
      infowindow.open(map, this);
    });
  }

Comments

[Lhankor_Mhy]

「ポインターが表示されません」とのことですが、マーカーのことでいいですか？

[hhhira326]

はい！失礼しました！マーカーのことです！

Answer 1

navigator.geolocation.getCurrentPosition()は非同期処理なので、service.nearbySearch(...)が実行されるタイミングではコールバック関数のfunction(position) {...}は実行されていません。
コールバックの中に書くか、Promise などを使って処理するのがいいでしょう。

javascript - Javascirpt async/awaitを用いた非同期処理の制御について - スタック・オーバーフロー

Comments

[hhhira326]

ありがとうございます！貼っていただいたものを参考にpromiseで処理したらできました！
非同期処理かどうかの見極めがわからないのですが、どうなったら非同期関数という判断になりますか？
「ページのリロードがされない」を基準に判断すればいいのでしょうか？？

[Lhankor_Mhy]

大抵はMDNに「非同期的に」などと書いてありますが、これは書いてないですね。
仕様を読めばタスクキューを使うことは分かるのですが、ちょっとハードル高いですね。
https://w3c.github.io/geolocation-api/#acquire-a-position
https://qiita.com/sho_U/items/ff82aa576837198097ce

HTTPリクエストやGPS測位みたいな、処理に時間がかかるものはだいたい非同期的、と覚える感じでいいと思います。（そうでないとブロッキングが起きてしまうので）

[hhhira326]

ご丁寧にありがとうございます！！
jsも未熟でリファレンスを翻訳してもわからなかったのでとても助かりました！！
本当にありがとうございます！