react-google-map-location
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

🌍 react-google-map-location

YouTube Grid Extension License

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

Package Sidebar

Install

npm i react-google-map-location

Weekly Downloads

7

Version

1.0.1

License

MIT

Unpacked Size

11.8 kB

Total Files

10

Last publish

Collaborators

  • sheeetface