React-google-map-location NPM

🌍 react-google-map-location

A lightweight and fully responsive React component for embedding Google Maps based on a location string or coordinates. No API key required!

🚀 Features

🏋️‍♀️ Lightweight: No need to worry about large bundle sizes.
🔑 No API Key Required: Easily embed maps without any additional setup.
📱 Responsive Design: Perfectly adapts to both mobile and desktop layouts.
🌐 Supports Address and Coordinates: Pass either a location string or latitude/longitude values.
⚙️ Custom Error Handling: Easily provide custom error components.

Examle

📦 Installation

npm install react-google-map-location

📖 Usage

import React from 'react';
import { MapLocation } from 'react-google-map-location';

const App = () => {
  return (
      <MapLocation
        location="Sveavägen 53, 4 tr, 101 24 Stockholm, Sweden" 
        zoom={12} 
        height='333px'
        mapType="satellite" 
        loading="lazy" 
        style={{ borderRadius: '8px' }} 
      />

      <MapLocation
        location={{ lat: 59.340140, lng: 18.058610 }} 
        height='500px'
        zoom={14}
      />

      <MapLocation
        height='500px'
      />
  )
}

export default App;

🎛️ Props

Prop	Type	Default	Description
`location`	`string \\| { lat: number; lng: number }`	`undefined`	The location as a string (e.g., "Sveavägen 53, 4 tr, 101 24 Stockholm, Sweden") or a coordinates object `{ lat, lng }`. When not provided, the map shows a default global view.
`width`	`string \\| number`	`'100%'`	The width of the map container.
`height`	`string \\| number`	`'100%'`	The height of the map container.
`zoom`	`number`	`16`	The zoom level of the map.
`mapType`	`'roadmap' \\| 'satellite'`	`'roadmap'`	The map type: either `roadmap` or `satellite`.
`loading`	`'lazy' \\| 'eager'`	`'lazy'`	Controls the loading behavior of the iframe: `lazy` (on scroll) or `eager`.
`style`	`React.CSSProperties`	`{}`	Additional inline styles for the iframe.

🛡️ Advantages

🏋️‍♀️ Lightweight: This package is designed to have a minimal footprint, ensuring a fast loading time and efficient performance.
🔑 No API Key Required: Easily embed Google Maps without the need for an API key, making integration straightforward and hassle-free.
📱 Responsive Design: The map component automatically adapts to various screen sizes, ensuring a seamless experience on both mobile and desktop devices.
🌐 Supports Address and Coordinates: You can provide either a location string (e.g., "Sveavägen 53, 4 tr, 101 24 Stockholm, Sweden") or specific latitude and longitude coordinates to display the map.
⚙️ Custom Error Handling: You can specify a custom error component to be displayed if the location provided is invalid, or fall back to a default message.

⭐ Support

If you find this extension useful, consider giving it a star on GitHub!
⭐ Star on GitHub

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.# react-google-map-location

react google map location coordinates embed responsive

1.0.1

11 months ago

1.0.0

11 months ago