Maps can be used on your site to show the location of each of the listings. Here’s one example of what a map could look like – although you can easily change the size, marker icon, and a ton of other features:

Screen Shot 2013-05-20 at 7.14.32 PM

Adding a map is very easy and can be done in a matter of minutes. Here’s the basic code you’ll need to add:

<script type="text/javascript">
  jQuery(document).ready(function( $ ) {
    search_bootloader = new SearchLoader ({
      map: true
    });
  });
</script>
<?php
//Needed to render the map div and load the needed js.
echo PLS_Map::dynamic(null, array('width' => 600,'height' => 300)); ?>

Customizing the Map

You can easily customize the map by passing in various parameters to the map attribute of the search loader array. This is the primary way the map object is modified. For example, to customize the center of the map as well as it’s zoom level you could use:

 map: {
        lat: '20.7983626',
        lng: '-156.3319253',
        zoom: 9
      }

Stitching it all together…

In order for the map to show listings, it must have listings to show. So add a PLS_Partials::get_listings_list_ajax and initialize it in JS.

<script type="text/javascript">
  jQuery(document).ready(function( $ ) {
    search_bootloader = new SearchLoader ({
      map:{
        lat: '38.89511',
        lng: '-77.03637',
        zoom: 12
      },
      list: {}
    });
  });
</script>
<?php
//Needed to render the map div and load the needed js.
echo PLS_Map::dynamic(null, array('width' => 600,'height' => 300));
echo PLS_Partials::get_listings_list_ajax('context=custom_listings_search');
 ?>