#GoogleMap #JavaScript #TypeScript
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
タイル地図の[[URL]]をカスタマイズする`Image Map Types`がお手軽。
```ts
map = new google.maps.Map(mapRef.value!, {
//...
//...
mapTypeControlOptions: {
mapTypeIds: ["roadmap", "satellite", "originalMap"],
},
});
// https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
function getNormalizedCoord(coord: google.maps.Point, zoom: number) {
const y = coord.y;
let x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
const tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = ((x % tileRange) + tileRange) % tileRange;
}
return { x: x, y: y };
}
const originalMapType = new google.maps.ImageMapType({
name: "OriginalMap",
getTileUrl: function (coord: google.maps.Point, zoom: number): string {
const normalizedCoord = getNormalizedCoord(coord, zoom);
return <タイル画像のURL>
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 19,
minZoom: 0,
});
state.gmap.mapTypes.set("originalMap", osmMapType);
```
`Map`オブジェクトの初期化時に`mapTypeControlOptions`に指定するのを忘れずに。また追加ではなく上書きなので、不要でなければ`"roadmap"`など[[Google Maps]]のデフォルトタイプを忘れずに記載すること。