How to use javascript from Dart inside a polymer element

I am trying to modify sample-google-maps to work inside a polymer element. On running following code I don't see anything except the title and there are no errors.Please advise how can I make this work.

In longer run I want to define additional components using google-chart api and Polymer dart. Can someone point me to a worked out example.

index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DEMO</title>
    <script type="text/javascript" src="packages/web_components/platform.js"></script>
    <link rel="import" href="lib_elements/googlemapcanvas/googlemapcanvas.html">

  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
  </script>
  </head>

  <body>   
    <h1> Trial for Charted Library</h1>

    <google-map-canvas></google-map-canvas>

    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>
  </body>
</html>

googlemapcanvas.html

<!-- import polymer-element's definition -->
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="google-map-canvas" attributes="title">

  <template>
  <style>
      #google-map-canvas {
          height:100%
      }
  </style>
  <h1>{{title}}</h1>
  <div id="google-map-canvas"></div>
  </template>
  <script type="application/dart" src="googlemapcanvas.dart"></script>
</polymer-element>

googlemapcanvas.dart

import 'package:polymer/polymer.dart';
import 'dart:js' as js;
import 'dart:html';
/**
 * A Polymer click counter element.
 */
@CustomTag('google-map-canvas')
class GoogleMapCanvas extends PolymerElement{

  @published String title = "Google Map Canvas";
  DivElement googlemapcanvas;


  GoogleMapCanvas.created(): super.created(){

  }

  @override
  void attached(){
    googlemapcanvas = $['google-map-canvas'];
    draw();
  }

  draw(){
    final google_maps = js.context['google']['maps'];
    var center = new js.JsObject(google_maps['LatLng'], [-34.397, 150.644]);
    var mapTypeId = google_maps['MapTypeId']['ROADMAP'];

    var mapOptions = new js.JsObject.jsify({
        "center": center,
        "zoom": 8,
        "mapTypeId": mapTypeId
    });

    new js.JsObject(google_maps['Map'],[googlemapcanvas, mapOptions]);

  }
}

This is a CSS problem, maybe specific to Polymer, but a CSS problem all the same. There are several things you can do. The simplest one is to add fullbleed as an attribute to <body>.

<body unresolved fullbleed>

</body>

And your map will show up, taking up the rest of the space available. Or you can specify the height of your google-map-canvas element to have a height in pixels like so

<polymer-element ...>
    <template>
        <style>
            :host {
               height: 500px;
            }
            ...
        </style>
        ...
    </template>
</polymer-element>

And the map will fill the space left after the title you put just before it. But it will not go beyond the 500px that you gave the element. There are other tricks you could do. I'd look at this site for more ways to layout polymer elements

https://www.polymer-project.org/docs/polymer/layout-attrs.html

And a guide to style polymer elements

https://www.polymer-project.org/docs/polymer/styling.html

Hope that answers your questions.

By the way, you do know the is a port of Google maps API to Dart?

https://pub.dartlang.org/packages/google_maps

来源：https://stackoverflow.com/questions/26801694/how-to-use-javascript-from-dart-inside-a-polymer-element

标签

javascript