[Let] homes徒歩圏内マップ描画

mecaota — 2024-04-19T02:30:12Z
/*
 * @title homes徒歩圏内マップ描画
 * @description ※ChromeとHomesの仕様変更により、ブックマークレットとしては使えなくなりましたが、新規実装したrenderMapByAddressTextに緯度経度をカンマ区切りした文字列("100,200")のようなものを入力して関数実行自体はできるので、緯度経度だけ特定してきて、ブラウザコンソールで手動で実行してください。※homesで表示されている一部のページに表示されているGoogleMap(コンテナ検索、バイク置き場検索、レンタルスペース検索など)の地図上に、事前にコピーした住所や緯度経度の文字列から計算した中心点から半径400mと半径800m圏内を描画するブックマークレットです。
 * @include https://www.homes.co.jp/*
 * @license MIT License
 */

(() => {
  /**
   * 与えられた緯度経度を中心に半径400mの円を描きます
   * @param {google.maps} api - 操作先のGoogleMap APIオブジェクト
   * @param {google.maps.Map} map - 操作先のGoogleMapオブジェクト。ここに操作したいウェブサイトで使用しているgoogle.maps.Mapの変数を指定してください
   * @param {google.maps.LatLng} latLng - GoogleMap緯度経度オブジェクト
   * @return {void}
   */
  const renderMap = (api, map, latLng) => {
    map.setCenter(latLng);

    // 物件マーカー
    const marker = new api.Marker({
      position: latLng,
    });

    const color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
      Math.random() * 256,
    )}, ${Math.floor(Math.random() * 256)})`;

    // 物件から半径400m圏内
    const walkableCircle = new api.Circle({
      strokeColor: color,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: color,
      fillOpacity: 0.5,
      center: latLng,
      radius: 400,
    });

    // 物件から半径800m圏内
    const moreWalkableCircle = new api.Circle({
      strokeColor: color,
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: color,
      fillOpacity: 0.25,
      center: latLng,
      radius: 800,
    });

    // マップに描画
    marker.setMap(map);
    walkableCircle.setMap(map);
    moreWalkableCircle.setMap(map);
  };

  /**
   * 住所または緯度経度をもとに、緯度経度を算出して、その点を中心に半径400mの円を描きます
   * @param {google.maps} api - 操作先のGoogleMap APIオブジェクト
   * @param {google.maps.Map} map - 操作先のGoogleMapオブジェクト。ここに操作したいウェブサイトで使用しているgoogle.maps.Mapの変数を指定してください
   * @param {string} address - 住所/緯度経度("100.100, 100.100"など)
   * @return {void}
   */
  const renderMapByAddress = (api, map, address) => {
    if (address.includes(',')) {
      // カンマ区切りの場合は引数を緯度経度とみなして描画
      const [lat, lng] = address.split(',').map((text) => text.trim());
      renderMap(api, map, new api.LatLng(lat, lng));
    } else {
      // 住所情報とみなして緯度経度算出して描画
      const geocoder = new api.Geocoder();
      geocoder.geocode({ address }, function (results, status) {
        if (status === 'OK' && results) {
          const latLng = results[0].geometry.location;
          renderMap(api, map, latLng);
        } else {
          console.error(
            '何らかのエラーで緯度経度が算出できませんでした: ' + status,
          );
        }
      });
    }
  };

  /**
   * 住所または緯度経度をもとに、緯度経度を算出して、その点を中心に半径400mの円を描きます。renderMapByAddressTextのラッパー
   * @param {string} address - 住所/緯度経度("100.100, 100.100"など)
   * @return {void}
   */
  const renderMapByAddressText = (address) => {
    renderMapByAddress(window.google.maps, window.buildingMap, address);
  }

  navigator.clipboard.readText().then(renderMapByAddressText);
})();
Bookmarklets from mecaota

[Let] homes徒歩圏内マップ描画
