Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's how to declare a simple custom element that contains a google map. In this example the map has to be handled manually outside of the component :</p> <ul> <li><strong>gmap.html</strong></li> </ul> <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name="gmap-map"&gt; &lt;template&gt; &lt;div id='mapView' style='height: 500px; width: 500px'&gt;&lt;/div&gt; &lt;/template&gt; &lt;script type="application/dart" src="gmap.dart"&gt;&lt;/script&gt; &lt;/polymer-element&gt; </code></pre> <ul> <li><strong>gmap.dart</strong></li> </ul> <pre class="lang-dart prettyprint-override"><code>import 'package:google_maps/google_maps.dart'; import 'package:polymer/polymer.dart'; @CustomTag('gmap-map') class MapElement extends PolymerElement { GMap map; MapElement.created() : super.created() { final mapOptions = new MapOptions() ..mapTypeId = MapTypeId.ROADMAP; final mapView = getShadowRoot('gmap-map').querySelector("#mapView"); map = new GMap(mapView, mapOptions); } attached() { super.attached(); // this allow to notify the map that the size of the canvas has changed. // in some cases, the map behaves like it has a 0*0 size. event.trigger(map, 'resize', []); } } </code></pre> <p>Now you can use it in an html file like that (you access the map instance with the <code>map</code> getter on element) :</p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;GMaps app&lt;/title&gt; &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;link rel="import" href="gmap.html"&gt; &lt;script type="application/dart"&gt; import 'dart:html'; import 'gmap.dart' as m; import 'package:google_maps/google_maps.dart'; import 'package:polymer/polymer.dart'; main(){ initPolymer(); m.MapElement mapElement = querySelector('#myMap'); mapElement.map ..panTo(new LatLng(48, 2.5)) ..zoom = 5; } &lt;/script&gt; &lt;script src="packages/browser/dart.js"&gt;&lt;/script&gt; &lt;script src="packages/browser/interop.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Gmaps&lt;/h1&gt; &lt;gmap-map id='myMap'&gt;&lt;/gmap-map&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload