creating a google map with marker using web-component

问题

I'm trying to use polymer and web-component to display some markers in the google-map.

Here's my code :

<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/platform/platform.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/google-apis/google-apis.html">
    <link rel="import" href="bower_components/google-map/google-map.html">

    <script>
        var airdromes = [
            {
                "name"       : "Anapa-Vityazevo",
                "icao"       : "URKA",
                "country"    : "RU",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 44.995834,
                    "longitude": 37.334445,
                    "elevation": 147,
                    "heading"  : 41
                },
                "frequencies": {
                    "tower": 121,
                    "tacan": ""
                }
            },
            {
                "name"       : "Batumi",
                "icao"       : "UGSB",
                "country"    : "GE",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 41.6166667,
                    "longitude": 41.589722223,
                    "elevation": 32,
                    "heading"  : 125
                },
                "frequencies": {
                    "tower": 131,
                    "tacan": "16X (BTM)"
                }
            }
        ];
    </script>

</head>
<body>

<h1>my-map</h1>
<polymer-element name="my-map">
    <template>
        <style>
            google-map {
                display: block;
                width: 400px;
                height: 400px;
            }
        </style>
        <google-map map={{map}} disableDefaultUI fitToMarkers>
            <template repeat="{{airdrome in airdromes}}">
                <google-map-marker map={{map}} latitude="{{airdrome['coord']['latitude']}}"
                                   longitude="{{airdrome['coord']['longitude']}}"></google-map-marker>
            </template>
        </google-map>
    </template>
    <script>
        Polymer('my-map', {
            airdromes: airdromes,
            ready    : function() {
                console.log('this.airdromes :', this.airdromes);
            }
        });
    </script>
</polymer-element>


<my-map></my-map>

</body>
</html>

It's seems that all the code for the google-map is here, there are iteration for the markers.

The only problem I have is that the <google-map/> doesn't display, no width and no height when inserted in a <polymer-element/> but ok if I call it alone.

Thanks for the help.

EDIT

Ok, after even more research and tests I finally achieved this. 1. importing "google-apis.html" because it seems to help loading google-map 2. my google-map style was in the head of the document, I put it just after the first <template> and before the <google-map> 3. I misspelled "fittomarker" and change it with the good name and tada !

code has been corrected.

回答1:

Polymer 1.0 works differently, you need to create two HTML pages. Here's the code:

Index.html

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Google Map</title>
   <link rel="import" href="bower_components/google-apis/google-apis.html">
   <link rel="import" href="bower_components/google-map/google-map.html">

   <link rel="import" href="mappa.html">
  </head>

  <body>

    <my-map></my-map>

  </body>
</html>

Mappa.html

<dom-module id="my-map">
<template>
    <style>
        google-map {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
    <google-map map="{{map}}" disableDefaultUI fitToMarkers>
        <template is="dom-repeat" items="{{marker}}">
            <google-map-marker map={{map}} latitude="{{item.latitudine}}" longitude="{{item.longitudine}}">
            </google-map-marker>
        </template>
    </google-map>
</template>

<script>
    Polymer({
        is: 'my-map', 
        ready: function() {
            this.marker = [
                {latitudine: '41.223596', longitudine: '16.296087'},
                {latitudine: '41.222450', longitudine: '16.291259'}
            ];
        }
    });
</script>

来源：https://stackoverflow.com/questions/25129515/creating-a-google-map-with-marker-using-web-component

标签

google-maps

polymer

web-component

google-web-component