Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Feat] Implement Static fallback via the Maps Static API

オープン
  • 何か問題がありますか？
#480 コメント 5 件 リアクション 13 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript
領域
frontend, performance, web-dev

調査の方向性

src/components/map/index.tsx と APIProvider コンテキストから始め、リンクされた static-facade コミットのプロトタイプと比較します。ドキュメント化された center および zoom props を使用して StaticMap パスを実装し、ユーザーが操作するまで通常のマップの読み込みを遅延させ、操作が必要であることを示す UI を提供します。

索引モデルが issue の本文から書いたものです。

説明

Target Use Case

Minimize the user experience impact of the library by improving paint time and responsiveness metrics.

Proposal

Data from HTTP Archive shows that Google Maps has the longest download times during page rendering when compared to the other most popular third-party libraries on the web:
Median download time during page rendering for the top 10 most popular third parties (calculated using HTTP Archive and Lighthouse’s wastedMs attribute via the render blocking audit)
Query

This happens because the Maps JavaScript API fetches ~240 kB of JavaScript across multiple scripts. In this library, we can circumvent this by delaying the instantiation of these scripts until the user engages with the map. While waiting for the user’s interaction, we can fetch and display an image via the Maps Static API passing in the same set of required props (center and zoom).
Optimized prototype of react-google-maps that displays an image and defers JS until user interaction)
Link

To implement this feature, the <APIProvider> component of the library can keep track of whether the map has been selected as part of the context information it provides. We can use this to conditionally render either the “real” map versus a static version of it:

// src/components/map/index.tsx

import { StaticMap } from "./static-map";
// ...

return (
  <div onClick={() => context.setMapSelected(true)}>
    >
    {context.mapSelected ? (
      // Load normal map
    ) : (
      <StaticMap {...props} /> // Load Static Map if map hasn't been clicked
    )}
  </div>
);

You can see all the changes in this prototype in this commit. Note that this is just a prototype, and the real implementation would offer some sort of UI that makes it clear that the map needs to be clicked in order to be interacted with.

Performance Tests

Comparing the current version of react-google-maps with the prototype above on the same site shows a significant difference in rendering times:

When the user interacts with the map, the same scripts are still fetched and executed. But by deferring them until they’re needed, the browser's main thread is freed up to handle other tasks while the document continues to load. This will improve both Largest Contentful Paint and Interaction to Next Paint.

The chart and table below present a comparison of these two metrics when applying this optimization to a representative Next.js website: https://news-site-next-static.netlify.app/.

  Largest Contentful Paint Total Blocking Time*
News Site Next 3.38s 0.25s
News Site Next with react-google-maps 7.12s (+3.74s) 0.97s  (+0.72s)
News Site Next with react-google-maps (Optimized) 4.22s (+0.84s) 0.44s (+0.19s)

Test conditions: WebPageTest - Emulated 4G Connection, Chrome, Moto G4 (Median Results - 3 Runs)
*Total Blocking Time is used as a lab proxy here for Interaction to Next Paint

主要言語
TypeScript
スター
1.9k
フォーク
195
平均マージ
2日 11時間
マージ済み PR（30日）
14

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

visgl/react-google-maps のほかの issue

visgl/react-google-maps の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。