Google Maps– tag –
-
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第12回】本番公開前チェック:APIキー制限・クォータ・予算アラート・性能
Google Maps APIとNuxt 4の連載最終回。本番公開前に確認すべきAPIキーの制限、クォータと予算アラート、Map ID、性能、PostgreSQLへの切り替え、座標の保存期間をコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第11回】CSVで既存の台帳を一括取り込みする
Google Maps APIとNuxt 4の連載第11回。Excelの台帳をCSVで一括取り込みし、住所だけの行はサーバーでGeocoding APIにより変換する方法を、費用を確認できるプレビューや重複判定のコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第10回】現在地から半径◯km/描いたエリア内の地点を探す
Google Maps APIとNuxt 4の連載第10回。ブラウザの位置情報で現在地を表示し、半径の円や地図上に描いた多角形の中の地点だけを絞り込む方法を、廃止済みの描画ライブラリに頼らないコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第9回】マーカーが数千件でも重くしない:クラスタリングと表示範囲読み込み
Google Maps APIとNuxt 4の連載第9回。地点が数千件でも地図を重くしないために、markerclustererのクラスタリングと、表示範囲(bbox)だけを読み込むAPI、差分更新をコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第8回】カテゴリで絞り込み、一覧と地図を連動させる
Google Maps APIとNuxt 4の連載第8回。カテゴリのチェックボックスで地点を絞り込み、一覧と地図のピンを連動させる方法を、選択状態の共有・computed・ピンの強調表示のコード付きで解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第7回】施設名で検索して地点を取り込む(Places API (New))
Google Maps APIとNuxt 4の連載第7回。Places API (New)のPlaceAutocompleteElementで施設名を検索して地点を登録する方法と、要求フィールドで決まる料金区分・保存の規約を解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第6回】住所を入力して緯度経度に変換する(Geocoding API v4をサーバー経由で)
Google Maps APIとNuxt 4の連載第6回。Geocoding API v4をNuxtのサーバー経由で呼び、住所から緯度経度の候補を出して登録する方法と、キーの分け方・課金・座標の保存期間の規約を解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第5回】地図をクリックして新しい地点を登録する
Google Maps APIとNuxt 4の連載第5回。地図クリックで仮ピンを立て、Advanced Markerのドラッグで位置を調整してから地点を登録する方法と、API費用・入力検証の注意点を解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第4回】マーカーをクリックしてInfoWindowと詳細パネルを出す
Google Maps APIとNuxt 4の連載第4回。Advanced Markersのクリックとキーボード操作でInfoWindowと詳細パネルを表示し、選択状態をuseStateで共有する方法とXSS対策を解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第3回】地点データをNuxt server API + SQLiteに保存する
Google Maps APIとNuxt 4の連載第3回。地点データをNuxtのserver APIとSQLite(node:sqlite)に保存し、zodで入力を検証する登録・更新・削除APIの作り方と、本番で必要な点を解説します。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第2回】Advanced Markersでカテゴリ別の色付きピンを立てる
Google Maps APIとNuxt 4の連載第2回。非推奨の旧MarkerではなくAdvanced Markers(AdvancedMarkerElement・PinElement)でカテゴリ別の色付きピンを立てる方法を解説。 -
連載:NuxtとGoogle Mapsで作る情報集約マップ
【NuxtとGoogle Mapsで作る情報集約マップ 第1回】APIキーとMap IDを用意して、Nuxt 4で地図を1枚表示する
Google Maps APIとNuxt 4で社内向け情報集約マップを作る連載の第1回。全12回の目次、APIキーとMap IDの準備、キー制限、地図を1枚表示するコードと発注者向けの注意点を解説します。
1
