🌍 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.

📦 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