polymer Google Map Mark With Built in Cache D - Caching Search Results

Example

Our goal however, was to

• make a list of places
• mark all of them on the map and,
• mark any other place of our choice, by using the search box

We have a search box, where the user can search for one query at a time.In order to accommodate multiple queries, we need to cache the results for each query, before we display the markers and pin them on the map

So, Let us add

• A Property say locations which accepts an array of locations
• A Property cache which stores the results of each query in the location array passed to our custom element

cache:{
 
type:Object
 
},
 
locations:{
 
type:Object
 
}

Next, we write a function to cache each search result , resulting from a search for every place in the location array.

It is pretty simple!

We already are gathering the results into a property called “results”, which we then are looping through to display markers.

All we now need to do, is push each search result into an array, and our cache is done!

We need to use an event to trigger caching. That event, is called, “on-google-map-search-result” and it is fired, after the element google-map-search finishes a search.

So “on-google-map-search-result” , we call a function say “cacher” , to cache the current search results into a property called cache.

<google-map-search map=[[map]] query=[[searchQuery]] on-google-map-search-results=cacher>

Note:

Normally, to push an item into an array, we use the vanilla push method

e.g: I have a new place to add to my list of places I want to mark, say NewYork.

If the array I want to add it to is called locations, I would write

locations.push('New York');

However, in our case, we need to push any result from google-map-search into an array called cache.Then we need to loop through the cache with the latest results included.Not the existing cache.

Now, we use the dom-repeat template to loop through the results and place markers on the map.

However, If we pass a location array like so:

<g-map locations=["Iceland","Argentina","London"]></g-map>

Then, the results property of our custom element , will be overwritten for every item in that array.

Hence, we call the cacher method on-google-map-search-results event, and push the current result into the cache property.

This can not be a vanilla push like in the note above.

We Need to let the dom-repeater know, that our cache has been overwritten with each new search.

So, we use a special push that Polymer ships, like so:

cacher: function() {
this.push('cache', this.results);
}

Add that function, after the search function we wrote earlier.

The syntax implies, that the property cache is to be mutated, by addition of the current value of the property results and any dom-repeaters using the cache property to loop through, are to be notified of the mutation.

Lastly, we change the dom-repeat template to loop through cache, instead of results

Note:

cache is an array of arrays.

each element of the cache array, is a results array

So our dom-repeater, will be like so:

<template id="resultList" is="dom-repeat" items="[[cache]]">
 
    <template is="dom-repeat" items="[[item]]" as="marker">
 
        <google-map-marker latitude="{{marker.latitude}}" longitude="{{marker.longitude}}">
            <h2>{{marker.name}}</h2>
            <span>{{marker.formatted_address}}</span>
        </google-map-marker>
    </template>
</template>

Very Nice! We have the custom element all coded and ready to be used!

Let us test it out by passing an array of locations from index.html shall we?

<g-map
 
api-key="AIzaSyBLc_T17p91u6ujSpThe2H3nh_8nG2p6FQ"
 
locations='["Boston","NewYork","California","Pennsylvania"]'>
</g-map>

and there we go!