google map react
Support for React 18
google-map-react Google Maps API の小規模なセット上に記述されたコンポーネントです。これにより、Google マップ上に React コンポーネントをレンダリングできるようになります。これは完全に同型であり、サーバー上でレンダリングできます。さらに、Google Maps API が読み込まれていない場合でも、ブラウザーで地図コンポーネントをレンダリングできます。内部の調整可能なホバー アルゴリズムを使用しており、マップ上のすべてのオブジェクトをホバーできます。
この例のようなインターフェイスを作成できます(テーブルのスクロール、マップのズーム/移動、マーカー上でのホバー/クリック、テーブル行のクリックが可能です)。
単純なケースでは、 GoogleMapReactコンポーネントの子にlatおよびlngプロパティを追加するだけです。
jsbin で実際の動作を確認してください
import React from "react" ;
import GoogleMapReact from 'google-map-react' ;
const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;
export default function SimpleMap ( ) {
const defaultProps = {
center : {
lat : 10.99835602 ,
lng : 77.01502627
} ,
zoom : 11
} ;
return (
// Important! Always set the container height explicitly
< div style = { { height : '100vh' , width : '100%' } } >
< GoogleMapReact
bootstrapURLKeys = { { key : "" } }
defaultCenter = { defaultProps . center }
defaultZoom = { defaultProps . zoom }
>
< AnyReactComponent
lat = { 59.955413 }
lng = { 30.337844 }
text = "My Marker"
/ >
< / GoogleMapReact >
< / div >
) ;
}npm:
npm install --save google-map-react
糸：
yarn add google-map-react
デフォルトの Google マップ マーカー、バルーン、その他の地図コンポーネントの代わりに、クールなアニメーション React コンポーネントを地図上にレンダリングできます。
サーバー上でレンダリングされます。 (検索エンジンへようこそ) (ブラウザ開発ツールで JavaScript を無効にし、サンプル ページをリロードして動作を確認できます)
Google Maps API がロードされる前に (ロードされなくても) コンポーネントを地図上にレンダリングします。
ページの先頭に<script src=タグを配置する必要はありません。 Google Maps API は、 GoogleMapReactコンポーネントの最初の使用時にロードされます。
onGoogleApiLoaded使用して Google マップのmapとmapsオブジェクトにアクセスできます。この場合、 yesIWantToUseGoogleMapApiInternals trueに設定する必要があります。
...
const handleApiLoaded = ( map , maps ) => {
// use map and maps objects
} ;
...
< GoogleMapReact
bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
defaultCenter = { this . props . center }
defaultZoom = { this . props . zoom }
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
< AnyReactComponent
lat = { 59.955413 }
lng = { 30.337844 }
text = "My Marker"
/ >
< / GoogleMapReact > PST: 忘れずに、 yesIWantToUseGoogleMapApiInternals true に設定してください。
例はこちら
これで、マップ上のすべてのオブジェクトをホバーできるようになりました (ただし、必要に応じて CSS ホバー セレクターを使用することもできます)。この例でズームアウトしてみても、ほぼすべての地図マーカーの上にマウスを置くことができます。
React コンポーネントをマップ上に配置する: シンプル (ソース)
カスタム マップ オプション: 例 (ソース)
ホバー効果: シンプルなホバー (ソース)。距離ホバー (ソース)
GoogleMap イベント: 例 (ソース)
プロジェクト例: main (ソース); balderdash (メインと同じソース)
フックを使用したクラスタリングの例 ( new : ソース、記事)
クラスタリングの例 (ソース) google-map-clustering-example
数千のマーカーをレンダリングする方法 (新規: ソース) google-map-thousands-markers
例: 例 古い例
jsbin の例 jsbin の例
webpackbin の例 (新規) webpackbin の例を含むドキュメント (進行中)
ローカル開発例（新規） 開発例
ドキュメントは次の場所にあります。
APIリファレンス
新しいドキュメント (進行中)
ローカル開発は 2 つの部分に分かれています (理想的には 2 つのタブを使用します)。
まず、rollup を実行してsrc/モジュールを監視し、変更を加えるたびにそれを自動的にdist/に再コンパイルします。
npm start # runs rollup with watch flag 2 番目の部分では、モジュールのローカル バージョンにリンクされているexample/ create-react-app を実行します。
# (in another tab)
cd example
npm start # runs create-react-app dev serverこれで、 src/のライブラリまたはサンプル アプリのexample/srcに変更を加えるたびに、 create-react-appローカルの開発サーバーをライブリロードして、コンポーネントをリアルタイムで反復できるようになります。
サンプル アプリを実行しようとしているときに、「 Module not found: Can't resolve 'google-react-map'...というエラーが発生した場合は、ローカル開発モジュールを手動でリンクする必要があります。次の手順を試してください。
npm linkexample/に移動し、(他の依存関係をインストールした後) 以下を実行します。 npm link google-map-reactマサチューセッツ工科大学
私たちは積極的に貢献者を探しています。オーナーまたはコラボレーターにメッセージを送ってください。
