Descarga de google map react - Descarga del código fuente google map react

google map react

Otro código fuente

Support for React 18

Descargar

Reacción del mapa de Google ·

google-map-react es un componente escrito sobre un pequeño conjunto de la API de Google Maps. Le permite renderizar cualquier componente de React en Google Map. Es completamente isomórfico y puede renderizarse en un servidor. Además, puede representar componentes del mapa en el navegador incluso si la API de Google Maps no está cargada. Utiliza un algoritmo de desplazamiento interno y modificable: se puede desplazar el cursor sobre cada objeto del mapa.

Le permite crear interfaces como este ejemplo (puede desplazarse por la tabla, hacer zoom/mover el mapa, desplazarse/hacer clic en los marcadores y hacer clic en las filas de la tabla)

Empezando

En el caso simple, solo necesita agregar accesorios lat y lng a cualquier componente secundario de GoogleMapReact .

Véalo en acción en 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 >
  ) ;
}

¡Mi mapa no aparece!

Asegúrese de que el elemento contenedor tenga ancho y alto. El mapa intentará llenar el contenedor principal, pero si el contenedor no tiene tamaño, el mapa colapsará a 0 ancho/alto. Este no es un requisito para google-map-react, es un requisito para google-maps en general.

Instalación

npm:

 npm install --save google-map-react

hilo:

 yarn add google-map-react

Características

Funciona con tus componentes

En lugar de los marcadores, globos y otros componentes del mapa predeterminados de Google Maps, puedes representar tus interesantes componentes de reacción animados en el mapa.

Representación isomórfica

Se renderiza en el servidor. (Bienvenidos motores de búsqueda) (puede desactivar JavaScript en las herramientas de desarrollo del navegador y volver a cargar cualquier página de ejemplo para ver cómo funciona)

Posiciones de los componentes calculadas independientemente de la API de Google Maps

Representa componentes en el mapa antes (e incluso sin) que se cargue la API de Google Maps.

Cargas de la API de Google Maps bajo demanda

No es necesario colocar una etiqueta <script src= en la parte superior de la página. La API de Google Maps se carga con el primer uso del componente GoogleMapReact .

Utilice la API de Google Maps

Puede acceder al map de Google Maps y a los objetos maps utilizando onGoogleApiLoaded . En este caso, deberá configurar yesIWantToUseGoogleMapApiInternals en 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: recuerde establecer yesIWantToUseGoogleMapApiInternals en verdadero.

Ejemplo aquí

Algoritmo de desplazamiento interno

Ahora se puede desplazar el cursor sobre todos los objetos del mapa (sin embargo, aún puedes usar selectores de desplazamiento CSS si lo deseas). Si intenta alejar el zoom en este ejemplo, aún podrá desplazarse sobre casi todos los marcadores del mapa.

Ejemplos

Colocar componentes de reacción en el mapa: simple (fuente)
Opciones de mapas personalizados: ejemplo (fuente)
Efectos de desplazamiento: desplazamiento simple (fuente); distancia flotante (fuente)
Eventos de GoogleMap: ejemplo (fuente)
Proyecto de ejemplo: principal (fuente); tonterías (misma fuente que principal)
Ejemplo de agrupación en clústeres utilizando ganchos ( nuevo : fuente, artículo)
Ejemplo de agrupación (fuente) google-map-clustering-example
Cómo renderizar miles de marcadores ( nuevo : fuente) google-map-thousands-markers
Ejemplos: Ejemplos Ejemplos antiguos
ejemplo de jsbin ejemplo de jsbin
Ejemplos de webpackbin ( nuevos ) documentos con ejemplos de webpackbin (en progreso)
ejemplo de desarrollo local (nuevo) ejemplo de desarrollo

Documentación

Puedes encontrar la documentación aquí:

Referencia de API
NUEVOS DOCUMENTOS (En progreso)

Contribuir

El desarrollo local se divide en dos partes (idealmente usando dos pestañas).

Primero, ejecute rollup para observar su módulo src/ y recompilarlo automáticamente en dist/ cada vez que realice cambios.

npm start # runs rollup with watch flag

La segunda parte ejecutará el example/ create-react-app que está vinculado a la versión local de tu módulo.

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

Ahora, cada vez que realice un cambio en su biblioteca en src/ o en el example/src de la aplicación de ejemplo, create-react-app recargará en vivo su servidor de desarrollo local para que pueda iterar en su componente en tiempo real.

Instalación manual por enlace

Si recibe el error Module not found: Can't resolve 'google-react-map'... al intentar ejecutar la aplicación de ejemplo, debe vincular manualmente su módulo de desarrollo local, intente los siguientes pasos: