B - 渲染基本的谷歌地圖
讓你的瀏覽器準備就緒 - 將其填充
在 index.html 為我們的元素建立一個新的登入頁面。
包括自定義元素的 polyfill 工作。還匯入我們在 Polymer 註冊的自定義元素 g-map。
注意：
- Web 元件是瀏覽器支援的必要填充。
- 包含 Polymer，以便我們可以使用庫來建立自定義元素
所以開啟 index.html，幷包含必要的 Polyfills 和 Polymer。另外，匯入我們註冊的自定義元素
<head>
<title>Google Map</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="elements/g-map.html">
</head>
所以隨著瀏覽器 Polyfilled，
讓我們在自定義元素中呼叫 google-map 聚合物元素。
<template id="google-map-with-search">
<google-map></google-map>
</template>
然後，在我們的登入頁面 index.html 中呼叫自定義元素。
所以這是在 index.html 內部
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<g-map></g-map>
</div>
</div>
</div>
</body>
我此時嘗試使用自定義元素 g-map 渲染我的頁面，並找到了一個 EMPTY 頁面！
為什麼？？
當我看到控制檯日誌時，我看到了這一點
https://i.stack.imgur.com/0vfwD.jpg
啊!
所以，我們需要一個 api 金鑰來從谷歌渲染地圖。
注意：
從谷歌的 JavaScript API 獲取 API 金鑰非常簡單。
只需點選下面的連結，即可為每個專案生成個人金鑰。
現在，由於要使用 API金鑰，我們有兩個選擇。
- 讓使用者將其作為屬性傳遞
- 配置預設 API 金鑰
現在，我會選擇第一個，因為，任何 API Key 都有其限制。即它只能使用很多次。因此，配置和隨我們開發的元素一起裝運的鍵很快就會耗盡。
誰想要使用自定義元素，可以生成新金鑰，並將其作為屬性傳遞。
像這樣：
<g-map api-key="AIzaSyBLc_T17p91u6ujSpThe2H3nh_8nG2p6FQ"></g-map>
所以我們將 api 鍵作為屬性傳遞，在我們的自定義元素中，我們將它繫結到 Polymer 元素的 api-key 屬性。
像這樣：
<google-map api-key=[[apiKey]]></google-map>
所以一旦我們通過 API 金鑰並重新整理，我們仍然看不到地圖！
注意：
谷歌地圖，需要一些 CSS 來渲染。我們需要明確地設定地圖集的高度。
因此，在 css 目錄中建立一個 css 檔案，比如 app.css，然後新增這些行
google-map{ min-height:30vmax; }
現在重新整理後，我們看到了這一點
https://i.stack.imgur.com/9Qfea.jpg
好極了！ 我們只用最小的標記渲染了一張地圖！ 我們剛寫了這個！
<google-map api-key="[[apiKey]]"></google-map>