# google-maps-svelte

> This library is use to render google maps in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per th

Latest version **0.0.5** (published 2021-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install google-maps-svelte
pnpm add google-maps-svelte
yarn add google-maps-svelte
bun add google-maps-svelte
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2021-08-22 |
| First published | 2021-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 84.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | codewithashish |
| Keywords | svelte, svelte maps, google maps, svelte google maps, google maps svelte, svelte google map, google map svelte, svelte google maps markers, google maps markers svelte |

## Links

- npm: https://www.npmjs.com/package/google-maps-svelte
- npm.io page: https://npm.io/package/google-maps-svelte

## Recent versions

- 0.0.5 (latest) — 2021-08-22
- 0.0.2 — 2021-08-22
- 0.0.1 — 2021-08-22

## README

### Documentation

This library is use to render google maps in svelte application. We will have to pass 'latLong' as an input to display google maps in our application. in case we want to add markers of our map neary by locations we will have to pass markers data as per the below defined format. when user click on any particular marker an event will execute and user will notify on which marker user has been clicked

### Installation


### import google maps javacript in our publish/index.html file

```html
<script src="https://maps.googleapis.com/maps/api/js?key=googleapikey&**callback=initMap"></script>
```

```sh
npm install google-maps-svelte
```

```javascript
import GoogleMaps from "google-maps-svelte";
```

### in component html we can use

```sh
<GoogleMaps bind:latLong bind:markers on:markerClicked={markerClicked}/>
```

### latLong config format
```sh
latLong = {
    lat: 'your latitide',
    long: 'your longitude'
  };
```
### markers config format
```sh
markers = [
    {
      lat: 'marker latitude',
      long: 'marker longitude',
      labelDetails: {
        text: 'Marker Text display on marker this is required',
        fontWeight: 'normal',
        fontSize: '12px',
        color: 'white'
      }
    }
  ];
```
### Inputs

| Input | Type | Required/Optional| Uses |
| ------ | ------ | ------ | ------ |
| latLong | object | required | We will pass lat/long to display map of that particular area |
| markers | array | optional | We will pass as an array in case we want to display nearby by markers in that particular map |

### Events

| Output | Uses |
| ------ | ------ |
| markerClicked | This emitter will trigger when user click on any particular marker and return that particular marker information|

---
_Source: https://npm.io/package/google-maps-svelte · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._