Initial commit

teambirowsky · Jan 23, 2017 · 3c97759 · 3c97759
commit 3c97759
Show file tree

Hide file tree

Showing 8 changed files with 557 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components
+.idea
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# \<google-map-custom-maker\>
+
+
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
+
+## Viewing Your Application
+
+```
+$ polymer serve
+```
+
+## Building Your Application
+
+```
+$ polymer build
+```
+
+This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
+containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
+CSS, and JS optimizers.
+
+You can serve the built versions by giving `polymer serve` a folder to serve
+from:
+
+```
+$ polymer serve build/bundled
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,14 @@
+{
+  "name": "google-map-custom-maker",
+  "main": "google-map-custom-maker.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "google-map": "GoogleWebComponents/google-map#^1.2.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/custom-marker.html b/custom-marker.html
@@ -0,0 +1,56 @@
+<dom-module id="custom-marker">
+    <style>
+        :host {
+            position: absolute;
+            transform: translate(-50%, -50%);
+            cursor: default;
+            transition: box-shadow .3s ease;
+        }
+
+        :host(:hover), :host(:active) {
+            z-index: 999999999;
+        }
+
+        :host([position="top"]) {
+            transform: translate(-50%, -100%);
+        }polymer init
+
+        :host([position="center"]) {
+            transform: translate(-50%, -50%);
+        }
+
+        :host([position="bottom"]) {
+            transform: translate(-50%, 0);
+        }
+
+        :host([position="left"]) {
+            transform: translate(-100%, -50%);
+        }
+
+        :host([position="right"]) {
+            transform: translate(0, -50%);
+        }
+
+    </style>
+    <template>
+        <content></content>
+    </template>
+</dom-module>
+<script>
+	(function () {
+
+		Polymer({
+
+			is: 'custom-marker',
+
+			properties: {
+				position: {
+					type: String,
+                    reflectToAttribute: true
+				}
+			}
+
+		});
+
+	})();
+</script>
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,75 @@
+<!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-map-custom-maker demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../google-map/google-map-elements.html">
+    <link rel="import" href="../google-map-custom-maker.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+
+        .mymarker {
+            background: #4c4ecc;
+            color: #ff348b;
+            height: 300px;
+            width: 200px;
+            padding: 20px;
+            font-family: "Helvetica Neue";
+            font-size: 24px;
+            font-weight: 500;
+            box-shadow: 0 0 15px 5px rgba(0, 0, 0, .3);
+            opacity: .8;
+        }
+
+        google-map, demo-snippet {
+            width: 1200px;
+            height: 700px;
+        }
+    </style>
+</head>
+<body>
+<div class="vertical-section-container">
+    <h3>Basic google-map-custom-maker demo</h3>
+    <demo-snippet>
+        <template>
+            <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers
+                        api-key="AIzaSyDtwbkcg7mLu-h4J_UydSkF2KtrBtdGuTk">
+                <google-map-marker latitude="37.779" longitude="-122.3892"
+                                   draggable="true" title="Go Giants!"></google-map-marker>
+                <google-map-marker latitude="37.777" longitude="-122.38913"></google-map-marker>
+                <google-map-custom-marker latitude="37.777" longitude="-122.38913">
+                    <div class="mymarker">Custom Marker</div>
+                </google-map-custom-marker>
+
+                <google-map-marker latitude="37.777" longitude="-122.38623"></google-map-marker>
+                <google-map-custom-marker latitude="37.777" longitude="-122.38623" position="top">
+                    <div class="mymarker">Custom Marker</div>
+                </google-map-custom-marker>
+
+                <google-map-marker latitude="37.777" longitude="-122.38223"></google-map-marker>
+                <google-map-custom-marker latitude="37.777" longitude="-122.38223" position="right">
+                    <div class="mymarker">Custom Marker</div>
+                </google-map-custom-marker>
+
+                <google-map-marker latitude="37.777" longitude="-122.38023"></google-map-marker>
+                <google-map-custom-marker latitude="37.777" longitude="-122.38023" position="bottom">
+                    <div class="mymarker">Custom Marker</div>
+                </google-map-custom-marker>
+
+                <google-map-marker latitude="37.777" longitude="-122.38423"></google-map-marker>
+                <google-map-custom-marker latitude="37.777" longitude="-122.38423" position="left">
+                    <div class="mymarker">Custom Marker</div>
+                </google-map-custom-marker>
+            </google-map>
+        </template>
+    </demo-snippet>
+</div>
+</body>
+</html>