google map react Télécharger - google map react Code source télécharger

google map react

Autre code source

Support for React 18

Télécharger

Google Map Réagir ·

google-map-react est un composant écrit sur un petit ensemble de l'API Google Maps. Il vous permet de restituer n'importe quel composant React sur Google Map. Il est entièrement isomorphe et peut être rendu sur un serveur. De plus, il peut afficher les composants cartographiques dans le navigateur même si l'API Google Maps n'est pas chargée. Il utilise un algorithme de survol interne et modifiable : chaque objet de la carte peut être survolé.

Il vous permet de créer des interfaces comme cet exemple (vous pouvez faire défiler le tableau, zoomer/déplacer la carte, survoler/cliquer sur les marqueurs et cliquer sur les lignes du tableau)

Commencer

Dans le cas simple, il vous suffit d'ajouter les accessoires lat et lng à n'importe quel enfant du composant GoogleMapReact .

Voyez-le en action sur 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 >
  ) ;
}

Ma carte n'apparaît pas !

Assurez-vous que l'élément conteneur a une largeur et une hauteur. La carte tentera de remplir le conteneur parent, mais si le conteneur n'a pas de taille, la carte se réduira à 0 largeur/hauteur. Ce n'est pas une exigence pour google-map-react, c'est une exigence pour google-maps en général.

Installation

npm :

 npm install --save google-map-react

fil:

 yarn add google-map-react

Caractéristiques

Fonctionne avec vos composants

Au lieu des marqueurs, ballons et autres composants de carte Google Maps par défaut, vous pouvez afficher vos composants de réaction animés sympas sur la carte.

Rendu isomorphe

Il s'affiche sur le serveur. (Bienvenue aux moteurs de recherche) (vous pouvez désactiver javascript dans les outils de développement du navigateur et recharger n'importe quelle page d'exemple pour voir comment cela fonctionne)

Positions des composants calculées indépendamment de l'API Google Maps

Il restitue les composants sur la carte avant (et même sans) le chargement de l'API Google Maps.

Chargements de l'API Google Maps à la demande

Il n'est pas nécessaire de placer une balise <script src= en haut de la page. L'API Google Maps se charge lors de la première utilisation du composant GoogleMapReact .

Utiliser l'API Google Maps

Vous pouvez accéder à map Google Maps et aux objets maps en utilisant onGoogleApiLoaded . Dans ce cas, vous devrez définir yesIWantToUseGoogleMapApiInternals sur 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 : n'oubliez pas de définir yesIWantToUseGoogleMapApiInternals sur true.

Exemple ici

Algorithme de survol interne

Désormais, chaque objet de la carte peut être survolé (cependant, vous pouvez toujours utiliser des sélecteurs de survol CSS si vous le souhaitez). Si vous essayez de faire un zoom arrière dans cet exemple, vous pourrez toujours survoler presque tous les marqueurs de la carte.

Exemples

Placer les composants de réaction sur la carte : simple (source)
Options de carte personnalisée : exemple (source)
Effets de survol : survol simple (source) ; vol stationnaire à distance (source)
Événements GoogleMap : exemple (source)
Exemple de projet : principal (source) ; balderdash (même source que le principal)
Exemple de clustering utilisant des Hooks ( nouveau : source, article) clustering-with-hooks
Exemple de clustering (source) google-map-clustering-example
Comment afficher des milliers de marqueurs ( nouveau : source) google-map-milliers-markers
Exemples : Exemples Anciens exemples
exemple jsbin exemple jsbin
Exemples webpackbin ( nouveaux ) documents avec exemples webpackbin (en cours)
exemple de développement local (nouveau) exemple de développement

Documentation

Vous pouvez trouver la documentation ici :

Référence API
NOUVEAUX DOCUMENTS (En cours)

Contribuer

Le développement local est divisé en deux parties (idéalement à l'aide de deux onglets).

Tout d’abord, exécutez rollup pour surveiller votre module src/ et recompilez-le automatiquement dans dist/ chaque fois que vous apportez des modifications.

npm start # runs rollup with watch flag

La deuxième partie consistera à exécuter l' example/ create-react-app lié à la version locale de votre module.

 # (in another tab)
cd example
npm start # runs create-react-app dev server

Désormais, chaque fois que vous apportez une modification à votre bibliothèque dans src/ ou à l'exemple d'application example/src , create-react-app rechargera en direct votre serveur de développement local afin que vous puissiez itérer sur votre composant en temps réel.

Installation manuelle par lien

Si vous obtenez l'erreur Module not found: Can't resolve 'google-react-map'... lorsque vous essayez d'exécuter l'exemple d'application, vous devez lier manuellement votre module de développement local, essayez les étapes suivantes :