homes徒歩圏内マップ描画

    @@ -1,6 +1,6 @@ /* * @title homes徒歩圏内マップ描画 - * @description homes walkable map + * @description homesで表示されている一部のページに表示されているGoogleMap(コンテナ検索、バイク置き場検索、レンタルスペース検索など)の地図上に、事前にコピーした住所や緯度経度の文字列から計算した中心点から半径400mと半径800m圏内を描画するブックマークレットです。 * @include https://www.homes.co.jp/* * @license MIT License */
  • /*
     * @title homes徒歩圏内マップ描画
     * @description 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,
              );
            }
          });
        }
      };
    
      navigator.clipboard.readText().then((address) => {
        renderMapByAddress(window.google.maps, window.buildingMap, address);
      });
    })();
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2022/05/10 12:11:59 - 2022-05-10
  2. 2022/05/10 12:06:23 - 2022-05-10