Comfortable-google-map-react NPM

Comfortable-google-map-react

Google Map API for react programmer!!

This API was focused on comfortable programming

Usage example

Sample Image:

Sample Image

Sample code:

import React, { useState } from 'react';
import GoogleMap, { animation } from "comfortable-google-map-react"

function App() {
  const [state, setState] = useState({ A: "a", B: "b" });
  const APIKEY = "YOUR_API_KEY";
  const marker_list = [
    {
      title: "SampleTitle",
      lat: 37.496303,
      lng: 126.957266,
      describe: "Description",
      animation: {
        onMouseOver: animation.marker.BOUNCE_WITH_WINDOWINFO,
        onCreate: animation.DROP,
      },
    },
    {
      lat: 37.4965,
      lng: 126.9577,
    },
  ];

  console.log(state);
  return (
    <div>
      <div>Sample map</div>
      <GoogleMap
        APIKEY={APIKEY}
        width={900}
        height={500}
        lat={37.496303}
        lng={126.957266}
        zoom={16}
        marker_list={marker_list}
        state={state}
        setState={setState}
      ></GoogleMap>
    </div>
  );
}

export default App;

How to use this Module

import module

// import main module and animation set
import GoogleMap, { animation } from "comfortable-google-map-react"

Add information to Google map component

<GoogleMap
  APIKEY={APIKEY}            // your api_key
  width={900}                // map width
  height={500}               // map height
  lat={37.496303}            // latitude of map
  lng={126.957266}           // longtitude of map
  zoom={16}                  // zoom
  marker_list={marker_list}  // marker list(optional)
  state={state}              // your own state. this module add displayed marker list to state.
  setState={setState}        // your own setState. this module add displayed marker list to state.
></GoogleMap>

(optional)Add marker list

const marker_list = [
    {
      title: "SampleTitle",    // this title shows if mouse is on this marker (optional)
      lat: 37.496303,
      lng: 126.957266,
      describe: "Description", // this describe shows with windowinfo. (optional)
      animation: {             // set animation. (optional)
        onMouseOver: animation.marker.BOUNCE_WITH_WINDOWINFO,
        onCreate: animation.DROP,
      },
    },
    {
      lat: 37.4965,
      lng: 126.9577,
    },
  ];