Next.jsで作られたサイトにGoogle Mapを表示したい。
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-20%2018.34.13.png?alt=media&token=c131a15e-6458-4957-94fa-6c7cce9575d5)
弊社のプロジェクトでGoogle Mapを表示するタスクが発生したのでメモしました。
前提条件としてGoogle mapのAPIをNext.jsで使用します。
使用するAPIはMaps JavaScript APIです。APIのkeyが必要になりますので、事前に取得しました。
こちら(https://developers.google.com/maps/documentation/javascript/overview?hl=ja#maps_map_simple-typescript)のドキュメントを参考にしながら作業をしました。
まずはAPI keyをNext.js側に登録します。
.envにAPI keyを記述します。
GOOGLE_MAP_API_KEY = "XXXXXXXXXXXXXXXX_YOU_NO_API_KEY_XXXXXXX"
next.config.jsにも追記します。
module.exports = {
env: {
GOOGLE_MAP_API_KEY: process.env.GOOGLE_MAP_API_KEY
}
}
そして、@googlemaps/js-api-loaderモジュールをインストールします。
$ npm install --save @googlemaps/js-api-loader
下準備が終わったので、components/Map.tsx
を
作成し/pages/index.tsx
に読み込ませました。
// components/Map.tsx
import { Loader } from '@googlemaps/js-api-loader'
export default function Map() {
return (
<section>
<div id="map"></div>
</section>
)
}
// pages/index.tsx
import Map from '../components/Map'
export default function Home() {
return (
<Map />
)
}
では、いよいよ実装していきます。ドキュメント(https://github.com/googlemaps/js-samples/blob/5385d9cc27dba774f43a5d989bc428e6ec805456/samples/programmatic-load/src/index.ts#L24-L35)をそのままコピペしたのですがTypeScriptのlintエラーが出てしまったので型ファイルをインストールします。
$ npm install --save @types/google.maps
また、apiKey: process.env.GOOGLE_MAP_API_KEY
の部分に
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2322)
とエラーが出たので
process.env.GOOGLE_MAP_API_KEY
がundefinedの場合は処理させないために
apiKey: process.env.GOOGLE_MAP_API_KEY!
↑を追記しました。まとめたコードが下記になります。
またid="map"
には
height: 50vh;
のstyleを当てています。
// components/Map.tsx
import { Loader } from '@googlemaps/js-api-loader'
export default function Map() {
// ↓を追記しました。
if (typeof window !== 'undefined') {
let map: google.maps.Map
const additionalOptions = {}
// [START maps_programmatic_load_promise]
const loader = new Loader({
apiKey: process.env.GOOGLE_MAP_API_KEY!,
version: 'weekly',
...additionalOptions,
})
loader.load().then(() => {
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
})
})
}
return (
<section>
<div id="map"></div>
</section>
)
}
ではローカルサーバーを起動します。
$ npm run dev
お!
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-20%2018.19.53.png?alt=media&token=87847750-c239-4888-b52e-041b8f1cf44e)
地図が表示されていました。
シドニーが表示されているので、東京タワーを表示したいと思います。centerプロパティに緯度経度を入れzoomプロパティも調整し拡大表示にしました。
// components/Map.tsx内部の下記を編集しました。
loader.load().then(() => {
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center: { lat: 35.65874610748325, lng: 139.74591569509653 },
zoom: 15,
})
})
お
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-12-20%2018.45.09.png?alt=media&token=b33371c9-22a2-456c-9580-f2c63810d63a)
無事に表示できました。
うまくAPIを活用して弊社のプロジェクトにいかしていきたいと思いました。
ここまでお読みいただきありがとうございました。