# wirecase-google-maps

A limited use case of google maps with clickable markers. Great for your basic use case, should be got do go every where lit element is served.

## Using wirecase-google-maps

### Before you start

You will be needing your own api key from google. Since this key is passed as a parameter on the url you can't hid it so make sure you restrict it according to your use case.
You can set up your own api key at [Googles Developer Console](https://console.developers.google.com/apis/).

### Getting the element on the page

#### installing

This component is in the npm registry so you can just.

```bash
npm i @wirecase/google-maps
```

in you project directory.

#### using

This lit element is written as a module so you can use the following.

```html
<script src="google-maps.js"></script>
```

or

```javascript
import "@wirecase/google-maps";
```

Into your project then call it and pass your key to the apiKey property.

```javascript
properties:
apiKey: API_KEY, // Your google maps api key
value:  // an array of objects that represent map markers. Setter so property must be assigned with = opperator to work properly
  [{
    position: {lat: Your lat, lgn: Your long}
  }];
isView:false, // if edit marker
```

### Sample

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
    />
    <title>google-maps demo</title>
    <script defer src="google-maps.js"></script>
  </head>
  <body>
    <div class="vertical-section-container">
      <h3>Basic google-maps demo</h3>
      <wirecase-google-maps
        style="height:65vh;width:80vw"
        selectLocationMode
        apiKey="apii"
      ></wirecase-google-maps>
      <script src="webcomponents-loader.js"></script>
      <script>
        const googleMapsRef = document.querySelector("wirecase-google-maps");
        googleMapsRef.onValueChange = function(value) {
          console.log(value);
        };

        googleMapsRef.value = [
          {
            position: { lat: 41, lng: -112 }
          },
          {
            position: { lat: 33, lng: -117 }
          },
          {
            position: { lat: 29, lng: -82 }
          },
          {
            position: { lat: 43, lng: -70 }
          }
        ];
      </script>
    </div>
  </body>
</html>
```

### Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. Right now the api key is hard coded for the demo. A pr is forth coming where you will have to enter it in some way. For now please be kind with your demo usage.

### Viewing Your changes

```

\$ polymer serve

```
