@wire-test/list-components
v1.0.6-alpha.18
Published
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.
Downloads
3
Readme
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.
Getting the element on the page
installing
This component is in the npm registry so you can just.
npm i @wirecase/google-mapsin you project directory.
using
This lit element is written as a module so you can use the following.
<script src="google-maps.js"></script>or
import "@wirecase/google-maps";Into your project then call it and pass your key to the apiKey property.
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 markerSample
<!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="AIzaSyDlOGeFtyLEPH_IM3i0xUrVjPoK_ayG-hU"
></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 and npm (packaged with Node.js) 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