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

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

ただいまの
回答率

89.07%

カスタムフィールドで取得した住所をgoogleの検索ボックスに入力した場所から近い順に並べる

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 502
退会済みユーザー

退会済みユーザー

前提・実現したいこと

wpのカスタムフィールドで住所(緯度経度)を取得しマーカーを刺しつつ、取得した複数の住所をgoogleのsearchboxに入力した住所から近い順にサイドに一覧で出力するというものを作成したいのですがなかなか意図した挙動になりません。
・カスタムフィールドから取得し、マーカーを刺す。
・searchboxから入力した場所を表示する。
の実装まではいけました。

調査および試したこと

・function createMarkerButtonにてマーカーのタイトルを出力して並べているのでrankBy: google.maps.places.RankBy.DISTANCEを途中に追記することで近い順に並び替えができると思い追記してみたがうまく動かなかった。
・nearbysearchはそもそもapiにあるtypeのものでしか動かないのでしょうか...?

該当のソースコード

var shopList = [

        <?php
            $fields = CFS()->get('shop_info');
            if (!empty($fields)):
        ?>
            <?php foreach ($fields as $field): ?>
                {"latlng":[<?php echo $field['latitude']; ?>,<?php echo $field['longitude']; ?>],name:"<?php echo $field['shop']; ?>",comment:""},
            <?php endforeach;?>
        <?php endif; ?>

 ];
  var map;
  var infowindow;
  var geocoder;
    var service;

  function initialize() {

      geocoder = new google.maps.Geocoder();


    var opts = {
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), opts);

    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);


// -----------------------------------------------------------------------------------
    var markers = [];

    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });

    var bounds = new google.maps.LatLngBounds();
    var restaurant, i, latlng;
    for (i in shopList) {
      restaurant = shopList[i];
      latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]);
      bounds.extend(latlng);
      var marker = createMarker(latlng, restaurant.name, restaurant.comment);
      createMarkerButton(marker);
    }
    map.fitBounds(bounds);
  }

  function codeAddress() {
      var address = document.getElementById("address").value;
      geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
                  });
          } else {
              alert("Geocode was not successful for the following reason: " + status);
          }
      });
  }

  function createMarker(latlng, name, comment) {
    var marker = new google.maps.Marker({
      position : latlng,
      map : map,
      title : name
    });
    google.maps.event.addListener(marker, "click", function(){
      if(infowindow) infowindow.close();
      var iwopts = {
        content:  "<b>" + name + "</b><br>" + comment
      };
      infowindow = new google.maps.InfoWindow(iwopts);
      infowindow.open(map, marker);
    });
    return marker;
  }
  function createMarkerButton(marker) {
    var ul = document.getElementById("marker_list");
    var li = document.createElement("li");
    var title = marker.getTitle();
        li.innerHTML = title;
        ul.appendChild(li);

        service = new google.maps.places.PlacesService(map);
        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
                }
            ul.appendChild(li);
            } else {
                ul.removeChild(li);
            }
        }

    google.maps.event.addDomListener(li, "click", function(){
      google.maps.event.trigger(marker, "click");
    });
  }
  window.onload = initialize;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

searchboxに入力した住所から近い順にサイドに一覧で出力する

下記のような処理が必要になると思います。

  1. searchboxに入力した住所から座標を取得する
  2. 取得した座標とカスタムフィールドで用意した各座標の距離を求める
  3. 距離を基準に並べ替える
  4. 表示する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • カスタムフィールドで取得した住所をgoogleの検索ボックスに入力した場所から近い順に並べる