CODEWITHSUNDEEP
javascripthtmlpolymerweb-component
bitpshr
bitpshr

Reputation: 1063

Script tag within Custom Element

I am creating a custom element using Polymer that uses the Google Map's api. I want this element to take care of including the Google Map's script tag.

Where should this go within the Custom Element? Simply putting it at the top of the page throws a cross-origin issue.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="google-map" noscript>
    <template>
        <div id="stage"></div>
    </template>

    <script>
        Polymer('google-map', {
            ready: function() {
                new google.maps.Map(this.$.stage, {
                    zoom: 15,
                    center: new google.maps.LatLng(0, 0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    overviewMapControl: false,
                    panControl: false,
                    rotateControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    draggable: false,
                    maxZoom: 21
                });
            }
        });
    </script>
</polymer-element>

Upvotes: 1

Views: 1407

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

Fwiw, I believe the current dispensation in the specs is that <script src...> will be CORS restricted in imports.

You can see how we handled this problem in our google-maps element here:

https://github.com/Polymer/google-map/blob/master/google-map.html

There have been some ideas around generalizing this type of loading mechanism itself into a component, but nobody has executed yet.

Upvotes: 1

Related Questions