How to integrate your Polymer with your Google maps JavaScript api?

161 views

Skip to first unread message

Dot Coder

unread,

Nov 26, 2015, 11:30:15 PM11/26/15

to polym...@googlegroups.com

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>

<title>Adding a Custom Overlay</title>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

height: 100%;

}

</style>

// [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>

</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

Dot Coder

unread,

Dec 2, 2015, 6:07:33 AM12/2/15

to polym...@googlegroups.com

Dot Coder

unread,

Dec 2, 2015, 6:08:01 AM12/2/15

to polym...@googlegroups.com

On Fri, Nov 27, 2015 at 3:30 PM, Dot Coder <code...@gmail.com> wrote:

Reply all

Reply to author

Forward

0 new messages