Link the search results list to a Google map

You can also link up the search results lists to pinpoints on the Google Maps widget using hit meta rather than GPS coordinates. For example, you can view the search results for restaurants and their associated pinpoint location on Google Maps.

See Also
Prepare your data model for geographical search
  1. Go to the /search page and select the Design view.
  2. Drag a Vizualization > Maps > Google Maps widget on the page above the Standard Facets widget.
  3. Click on the Google Maps widget header to display its properties.
  4. Select the Based on Entries tab and then select the hit meta for the restaurant address in Address (1), for example, ${entry.metas['address']}

    Note: Alternatively, the Google Maps widget can reference an index field that contains GPS points for the Location property.

  5. Click on the Result List widget header to display its properties.
  6. Select the Interactions tab and configure the exa.io.HitDecorationInterface prop­erty to add a gmap pinpoint next to the search result title. The aim is to link the search result pinpoint with a corresponding pinpoint on the gmap.
    1. For Linked widget, select your Google Maps widget from the contextual menu on the left.
    2. For Css path, select Default template > Header left from the contextual menu.
    3. For Decoration position, choose whether to place the pinpoint before or after the search result title, for our example, prepend.



  7. Select the Preview to check your configuration changes.

    The search page of the Mashup Builder should display a list of results with pinpoints before each result title. Hovering on a search result pinpoint should refresh the Google Maps view to display the related entry.



  8. Click Apply.