polymer Google Map Mark With Built in Cache B - Rendering the basic google map
Example
Getting You Browser Ready - Polyfill it
Create a new landing page for our element, at index.html.
Include polyfills for a custom element to work.Also import the custom element g-map, which we registered with Polymer.
Note:
- Webcomponents, are the necessary polyfill for browser support.
- Polymer, is included, so that we can use the library to create our custom element
So Open up index.html, and include the necessary Polyfills and Polymer. Also, import the custom element we registered
<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>
So With the Browser Polyfilled,
Let us invoke the google-map polymer element inside our custom element.
<template id="google-map-with-search">
<google-map></google-map>
</template>
and then, invoke the custom element inside index.html, our landing page.
So this goes inside the index.html
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<g-map></g-map>
</div>
</div>
</div>
</body>
I tried rendering my page with the custom element g-map at this point, and found an EMPTY page!
WHY??
When I see the console log, I see this
Ah!
So, We need an api key to render a map from google.
Note:
Getting an API key from google’s javascript API, is pretty simple.
Just follow the link below, to generate your personal key per project.
Now, Since the API Key is to be used, we have two choices.
- Let the user pass it as an attribute
- Have a default API Key configured
Now, I would go for the first, simply because, any API Key has its imposed limits. i.e it can only be used so many times.So, a key configured and shipped with the element we develop, could soon run out.
Whoever wants to use the custom element, can generate a new key, and pass it as an attribute.
like so:
<g-map api-key="AIzaSyBLc_T17p91u6ujSpThe2H3nh_8nG2p6FQ"></g-map>
So We are passing the api key as an attribute and within our custom element, we bind it on to the Polymer element’s api-key attribute.
like so:
<google-map api-key=[[apiKey]]></google-map>
So Once we pass the API Key, and refresh, we Still do not see the map!
Note:
Google maps, need some css to render.We need the height of the map set explicitly.
So, make a css file inside the css directory, say app.css and, add these lines
google-map{ min-height:30vmax; }
And now upon refresh, we see this
Yay! We just rendered a map with just minimal markup! We just wrote this!
<google-map api-key="[[apiKey]]"></google-map>
