JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1158
  • Score
    100M100P100Q101840F
  • License MIT

React component to render a map with markers from Google Maps API

Package Exports

  • react-google-map

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-google-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-google-map npm license

React component to render a map with markers from Google Maps API

react-google-map example

Install

npm install --save react-google-map

Changelog

See changelog

Demo

http://cedricdelpoux.github.io/react-google-map/

Usage

import React, { Component } from 'react'
import GoogleMapLoader from "react-google-maps-loader"
import GoogleMap from 'react-google-map'

import iconMarker from "./iconMarker.svg"

const MY_API_KEY = "AIzaSyDwsdjfskhdbfjsdjbfksiTgnoriOAoUOgsUqOs10J0" // fake

const Map =  GoogleMapLoader(GoogleMap, {
  libraries: ["places"],
  key: MY_API_KEY,
})

export default class MyComponent extends Component {
  state = {
    coordinates: [{
      description: "Place du capitole",
      icon: iconMarker,
      latitude: 43.604363,
      longitude: 1.443363,
      title: "Toulouse"
    }],
    zoom: 8,
  }

  handleMapChange(coordinates, zoom) {
    this.setState({coordinates, zoom})
  }

  render() {
    const { coordinates, zoom } = this.state
    return (
      <Map
        autoFitBounds
        coordinates={coordinates}
        onChange={(coordinates, zoom) => this.handleMapChange(coordinates, zoom)}
        zoom={zoom}
      />
    )
  }
}

Props

  • coordinates: Array of objects with shape { description: String, latitude: Number, longitude: Number, title: String, icon: String } - by default is []
  • centerLat: Number,
  • centerLng: Number,
  • googleMaps: Object - injected by placesLoader,
  • onChange: Function with two parameters (New coordinates object, actual zoom),
  • zoom: Number,
  • mapTypeId: String - One of ["HYBRID", "ROADMAP", "SATELLITE", "TERRAIN"],

You can also pass all Google Maps options : https://developers.google.com/maps/documentation/javascript/reference

Development

Clean lib folder

npm run clean

Build lib folder

npm run build

Watch src folder

npm run watch

Lint src folder

npm run lint

License

See MIT