Socket
Socket
Sign inDemoInstall

@react-google-maps/api

Package Overview
Dependencies
Maintainers
2
Versions
139
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-google-maps/api

React.js Google Maps API integration


Version published
Weekly downloads
611K
increased by6.95%
Maintainers
2
Weekly downloads
 
Created

What is @react-google-maps/api?

@react-google-maps/api is a library that provides a set of React components for integrating Google Maps into your React applications. It offers a simple and efficient way to use Google Maps features such as markers, info windows, and various map controls.

What are @react-google-maps/api's main functionalities?

Basic Map

This code demonstrates how to render a basic Google Map using the @react-google-maps/api package. The map is centered at a specific latitude and longitude and has a defined container style.

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MyComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        { /* Child components, such as markers, info windows, etc. */ }
        <></>
      </GoogleMap>
    </LoadScript>
  )
}

export default MyComponent;

Markers

This code demonstrates how to add a marker to the Google Map. The marker is positioned at the center of the map.

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MyComponent() {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={center} />
      </GoogleMap>
    </LoadScript>
  )
}

export default MyComponent;

Info Windows

This code demonstrates how to add an Info Window to a marker on the Google Map. The Info Window appears when the marker is clicked and can be closed by clicking the close button.

import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';
import { useState } from 'react';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MyComponent() {
  const [selected, setSelected] = useState(null);

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker
          position={center}
          onClick={() => setSelected(center)}
        />
        {selected && (
          <InfoWindow
            position={center}
            onCloseClick={() => setSelected(null)}
          >
            <div>
              <h2>Info Window</h2>
              <p>Details about this location.</p>
            </div>
          </InfoWindow>
        )}
      </GoogleMap>
    </LoadScript>
  )
}

export default MyComponent;

Other packages similar to @react-google-maps/api

Keywords

FAQs

Package last updated on 11 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc