This is a test for dynamically adding a marker to a map when clicking on a button.
The marker is added to the dom but is not displayed.
This is reported on bug GoogleWebComponents/google-map#180.
This is a test for dynamically adding a marker to a map when clicking on a button.
The marker is added to the dom but is not displayed.
This is reported on bug GoogleWebComponents/google-map#180.
{ | |
"name": "polymer-test", | |
"version": "0.0.1", | |
"authors": [ | |
"Vincent Agnano" | |
], | |
"license": "MIT", | |
"dependencies": { | |
"polymer": "Polymer/polymer#^1.0", | |
"google-map": "GoogleWebComponents/google-map#~1.0" | |
} | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Polymer Google Map testing</title> | |
<style> | |
google-map { | |
min-height: 300px; | |
} | |
</style> | |
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> | |
<link rel="import" href="/bower_components/polymer/polymer.html"> | |
<link rel="import" href="/bower_components/google-map/google-map.html"> | |
<link rel="import" href="/bower_components/google-map/google-map-marker.html"> | |
</head> | |
<body> | |
<google-map latitude="42" longitude="3" zoom="10"> | |
<google-map-marker latitude="42.05" longitude="3.05" title="static marker">Static Marker</google-map-marker> | |
</google-map> | |
<button>Add marker</button> | |
<script> | |
(function() { | |
var button = document.querySelector('button'); | |
button.addEventListener('click', function(b) { | |
var gmap = document.querySelector('google-map'); | |
var marker = document.createElement('google-map-marker'); | |
marker.setAttribute('latitude', 41.95); | |
marker.setAttribute('longitude', 2.95); | |
marker.setAttribute('title', "Dynamic marker"); | |
marker.innerHTML = "Dynamic Marker added from JS"; | |
gmap.appendChild(marker); | |
}); | |
}(window)); | |
</script> | |
</body> | |
</html> |
<link rel="import" href="../bower_components/polymer/polymer.html"> | |
<link rel="import" href="../bower_components/google-map/google-map.html"> | |
<link rel="import" href="../bower_components/google-map/google-map-marker.html"> | |
<dom-module id="workaround-map"> | |
<style> | |
:host { | |
display: block; | |
} | |
google-map { | |
height: 100%; | |
} | |
</style> | |
<template> | |
<google-map id="[[id]]" latitude="[[latitude]]" longitude="[[longitude]]" zoom="[[zoom]]"> | |
<template is="dom-repeat" items="[[markersObj]]" as="marker"> | |
<google-map-marker latitude="[[marker.latitude]]" longitude="[[marker.longitude]]" title="[[marker.title]]"></google-map-marker> | |
</template> | |
</google-map> | |
</template> | |
<script> | |
Polymer({ | |
is: "workaround-map", | |
properties: { | |
markers: { | |
type: String, | |
observer: "_markersChanged", | |
value: "[]" | |
}, | |
markersObj: { | |
type: Array, | |
value: [] | |
}, | |
zoom: { | |
type: Number | |
} | |
}, | |
_markersChanged: function(newValue) { | |
this.markersObj = JSON.parse(newValue); | |
console.log('markers changed to', this.markersObj) | |
} | |
}) | |
</script> | |
</dom-module> |