On Fri, Nov 27, 2015 at 3:30 PM, Dot Coder <[email protected]> wrote:
> Dear Sir/Madam:
>
> A few polymer elements for google-map have been provided, as below:
>
> google-map-search
> google-map-marker
> google-map-directions
> google-map-point
> google-map-poly
>
> However, we intend to draw your Polymer elements like google-chart,
> paper-icon, paper-menu or other Polymer elements onto your Google maps
> overlay layer.
>
> Could you please give some clues how to implement?
>
>
> Give your custom overlay example:
>
> // [START region_attachment]
> /**
> * onAdd is called when the map's panes are ready and the overlay has been
> * added to the map.
> */
> USGSOverlay.prototype.onAdd = function() {
>
> var div = document.createElement('div');
> div.style.borderStyle = 'none';
> div.style.borderWidth = '0px';
> div.style.position = 'absolute';
> div.innerHTML = " <paper-icon-button icon=\"refresh\"></paper-icon-button>
> <span>My TED Google Sydney</span> <HR> <span>TED</span> <HR>";
>
> // Create the img element and attach it to the div.
> var img = document.createElement('img');
> img.src = this.image_;
> img.style.width = '100%';
> img.style.height = '100%';
> img.style.position = 'absolute';
> // div.appendChild(img);
>
> this.div_ = div;
>
> // Add the element to the "overlayLayer" pane.
> var panes = this.getPanes();
> panes.overlayLayer.appendChild(div);
> };
>
> Your polymer paper-icon-button does not work on google map overlay layer?
>
>
> The full source code is as below (
> https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
> ):
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
> <meta charset="utf-8">
> <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
> <link rel="import" href="../../iron-icons/iron-icons.html">
> <link rel="import" href="../../iron-icon/iron-icon.html">
> <link rel="import" href="../../iron-image/iron-image.html">
> <title>Adding a Custom Overlay</title>
> <style>
> html, body {
> height: 100%;
> margin: 0;
> padding: 0;
> }
> #map {
> height: 100%;
> }
> </style>
> <script src="
> https://maps.googleapis.com/maps/api/js?key=AIzaSyAhkaYliTzsIacsI3BDjJpapN4p5PthxfE&signed_in=true
> "></script>
> <script>
> // [START region_initialization]
> // This example creates a custom overlay called USGSOverlay, containing
> // a U.S. Geological Survey (USGS) image of the relevant area on the map.
>
> // Set the custom overlay object's prototype to a new instance
> // of OverlayView. In effect, this will subclass the overlay class
> therefore
> // it's simpler to load the API synchronously, using
> // google.maps.event.addDomListener().
> // Note that we set the prototype to an instance, rather than the
> // parent class itself, because we do not wish to modify the parent class.
>
> var overlay;
> USGSOverlay.prototype = new google.maps.OverlayView();
>
> // Initialize the map and the custom overlay.
>
> function initMap() {
> var map = new google.maps.Map(document.getElementById('map'), {
> zoom: 11,
> center: {lat: 62.323907, lng: -150.109291},
> mapTypeId: google.maps.MapTypeId.SATELLITE
> });
>
> var bounds = new google.maps.LatLngBounds(
> new google.maps.LatLng(62.281819, -150.287132),
> new google.maps.LatLng(62.400471, -150.005608));
>
> // The photograph is courtesy of the U.S. Geological Survey.
> var srcImage = 'https://developers.google.com/maps/documentation/' +
> 'javascript/examples/full/images/talkeetna.png';
>
> // The custom USGSOverlay object contains the USGS image,
> // the bounds of the image, and a reference to the map.
> overlay = new USGSOverlay(bounds, srcImage, map);
> }
> // [END region_initialization]
>
> // [START region_constructor]
> /** @constructor */
> function USGSOverlay(bounds, image, map) {
>
> // Initialize all properties.
> this.bounds_ = bounds;
> this.image_ = image;
> this.map_ = map;
>
> // Define a property to hold the image's div. We'll
> // actually create this div upon receipt of the onAdd()
> // method so we'll leave it null for now.
> this.div_ = null;
>
> // Explicitly call setMap on this overlay.
> this.setMap(map);
> }
> // [END region_constructor]
>
> // [START region_attachment]
> /**
> * onAdd is called when the map's panes are ready and the overlay has been
> * added to the map.
> */
> USGSOverlay.prototype.onAdd = function() {
>
> var div = document.createElement('div');
> div.style.borderStyle = 'none';
> div.style.borderWidth = '0px';
> div.style.position = 'absolute';
> div.innerHTML = " <paper-icon-button icon=\"refresh\"></paper-icon-button>
> <span>My TED Google Sydney</span> <HR> <span>TED</span> <HR>";
>
> // Create the img element and attach it to the div.
> var img = document.createElement('img');
> img.src = this.image_;
> img.style.width = '100%';
> img.style.height = '100%';
> img.style.position = 'absolute';
> // div.appendChild(img);
>
> this.div_ = div;
>
> // Add the element to the "overlayLayer" pane.
> var panes = this.getPanes();
> panes.overlayLayer.appendChild(div);
> };
> // [END region_attachment]
>
> // [START region_drawing]
> USGSOverlay.prototype.draw = function() {
>
> // We use the south-west and north-east
> // coordinates of the overlay to peg it to the correct position and size.
> // To do this, we need to retrieve the projection from the overlay.
> var overlayProjection = this.getProjection();
>
> // Retrieve the south-west and north-east coordinates of this overlay
> // in LatLngs and convert them to pixel coordinates.
> // We'll use these coordinates to resize the div.
> var sw =
> overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
> var ne =
> overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
>
> // Resize the image's div to fit the indicated dimensions.
> var div = this.div_;
> div.style.left = sw.x + 'px';
> div.style.top = ne.y + 'px';
> div.style.width = (ne.x - sw.x) + 'px';
> div.style.height = (sw.y - ne.y) + 'px';
> };
> // [END region_drawing]
>
> // [START region_removal]
> // The onRemove() method will be called automatically from the API if
> // we ever set the overlay's map property to 'null'.
> USGSOverlay.prototype.onRemove = function() {
> this.div_.parentNode.removeChild(this.div_);
> this.div_ = null;
> };
> // [END region_removal]
>
> google.maps.event.addDomListener(window, 'load', initMap);
>
> </script>
> </head>
> <body>
> <div id="map"></div>
> </body>
> </html>
>
>
>
>
> I believe you have tricks to integrate your polymer elements with your
> google maps api?
>
> Your kind assistance will be highly appreciated.
>
> Best wishes,
>
> Ted
>
>
>
>
>
>
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CAKngYUugA-0uV1wtJAVr1G6LwD-9Znq%3DXU59rf5TFD2e02zAbw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
