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>