Customizations

This is for you, out there, who feels the need to make changes to the map infowindow or listings sidebar.

Distance Placement in Results

When a location search is performed the distance is shown as a custom field above all other fields. If you want to customize the output of the distance in any way, you can do it by accessing the value just like you would any other field and placing it within your template as:

<?php echo $CustomFields->field('jr_gm_distance',$listing);?>

If you'd rather not customize a template for this and just want to have the distance appear in a different order you can create a banner custom field in the order where you want the distance to appear in the output, then add the code below in the banner field's PHP output format:

return $CustomFields->field('jr_gm_distance',$listing);

To prevent the distance from appearing twice on the listing, you would also need to disable the Publish distance on search results setting in the add-on configuration.

Custom Fields in Map

If you want to show custom fields in the map infowindow that is shown when you click a marker, the map sidebar or the listing slideout on mobile, you can add fill out a comma list of field names in the Infowindow fields setting in Configuration → Markers & infowindow.

Continue reading if you need to make changes to the field layout in these areas.

Custom Field Layouts

The data used to populate the map with markers is retrieved through an ajax request which responds with a JSON object. This object is then fed to a javascript template where different tags are replaced.

The JSON template and the infowindow, sidebar and slideout templates, the latter used for mobile, can be found inside the elements folder:

Joomla

components/
`-- com_jreviews_addons/
    `-- maps/
        `-- views/
            `-- themes/
                `-- maps/
                    `-- elements/
                        |-- map-infowindow-template.thtml
                        |-- map-json.thtml
                        |-- map-listing-template-sidebar.thtml
                        `-- map-listing-template-slideout.thtml

WordPress

wp-content/
`-- plugins/
    `-- com_jreviews_addons/
        `-- maps/
            `-- views/
                `-- themes/
                    `-- maps/
                        `-- elements/
                            |-- map-infowindow-template.thtml
                            |-- map-json.thtml
                            |-- map-listing-template-sidebar.thtml
                            `-- map-listing-template-slideout.thtml

To change the layout of custom fields it is necessary to modify the template code. For this example we'll use map-infowindow-template.thtml.

Make sure you copy the template files to your custom theme instead of making changes to the core files directly.

First you need to change the JSON payload in map-json.thtml, by keying the field names into the payload. This isn't done by default to reduce the size of the payload.

$fields[] = [
  'label' => $CustomFields->label($name,$listing),
  'text' => $fieldText,
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
];

to:

$fields[$name] = [
  'label' => $CustomFields->label($name,$listing),
  'text' => $fieldText,
  'showLabel' => Sanitize::getBool($fieldArray['properties'], 'show_title')
];

Now in the infowindow/sidebar/slideout templates, you can get rid of the field code:


<div class="jrCustomFields">
  <div class="jrFieldGroup">
    {{#fields}}
    <div class="jrFieldRow">
      {{#showLabel}}<div class="jrFieldLabel">{{label}}:</div>{{/showLabel}}
      <div class="jrFieldValue">{{& text}}</div>
    </div>
    {{/fields}}
  </div>
</div>

And add individual fields like this:


<div>{{fields.jr_name.label}}</div>
<div>{{& fields.jr_name.text}}</div>

The ampersand inside the tag is important to render HTML tags correctly if they are present in the field output.