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