polymer Google Map Mark With Built in Cache A - Getting Started

Example

In a nutshell, Our Custom Element Should

• Have a Built in Search Functionality, that searches and marks places on the map.
• Accept An attribute called location-array , which is a list of places
• Have a Listener , for listening to an event called “google-map-ready“.This event is fired, when the element has loaded.
  • This listener, should loop through the location-array, and assign the next element in your location-array as the current “search query”
• Have A method called cache
  • This method, caches the latitude and longitude of each place in the location-array, as soon as the search returns a result
• Have a Dom-repeat template, that loops through the cached results, and drops a marker at each location

So, the purpose of our custom element in essence means, If you pass an array of locations like so:

<g-map location-array='["Norway","Sweden"]'></g-map>

The custom element

• Should Not only mark Norway and Sweden on the map, but,
• Should also mark any subsequent searches on the map – i.e, If you search for Boston, after the map has marked Norway and Sweden, Boston should also have a pin on the map

Importing Dependencies

First, Let us import whatever we need into our element.This element is under

elements/g-map.html

<link rel=import href="../bower_components/google-map/google-map.html">
<link rel=import href="../bower_components/google-map/google-map-marker.html">
<link rel=import href="../bower_components/google-map/google-map-search.html">
<link rel=import href="../bower_components/google-map/google-map-directions.html">

Note

Some of the above imports, aren’t necessary, but good to have, in case you fancy add on functionality on your markers

We necessarily need,

• google-map
• google-map-marker
• google-map-search

Also, It is presumed, you know how to install the individual Polymer Elements Via Bower

Registering Our Element With Polymer

Next, we register our custom element as “g-map”

Polymer({
       is:"g-map" 
});

So! our custom element is registered with Polymer.

We will add google map search specific properties and any other properties we need, later.

Adding a Blueprint to our custom element - via templates

Next, we add the template for our custom element

Open up elements/g-map.html, and add a template that binds the custom elements DOM

<template id="google-map-with-search">
</template>

Now, wrap the entire html and javascript you wrote for our custom element, inside of a dom-module.

<dom-module id="g-map">
 
    <template id="google-map-with-search">
       
    </template>
    <script>
    Polymer({
        is:"g-map",
        properties: {}
 });
     </script> 
</dom-module>

Very Nice! We have a basic blueprint