Contribution Note: WPMU Developer, Arnold, did basically all of this. I just wrote up instructions so that everyone else could do it on their website too.

This article covers how to add a Google Map to your single-listing.php template, dynamically creating a map for each listing based on Custom Press fields. Each user of your website could also add a map to their listing using the WPMU Google Maps Plugin, but this standardizes the look for a directory.

If you’re just starting with manually styling the Directory Plugin, start here.
For help with the primary content area and featured image, go here.

If you’re trying to add a Google Map to your directory listings, start by downloading the MapPress Easy Google Maps Plugin from Chris Richardson - http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/

Activate the plugin for your site or for your network, depending on your needs. Mine is network activated.

(WPMU Google Maps Plugin should work with MapPress Easy Google Maps. It worked in my test using WP 3.3.2, WPMU Google Maps 2.5.3, and MapPress Easy Google Maps 2.38)

Under your site’s Settings > MapPress :

1. Mark “Automatic map display” as “No automatic display”
2. For “Post types” make sure “directory_listing” is checked
3. Save

For additional MapPress info and screenshots, go here - http://wphostreviews.com/mappress-documentation

(Note: I’m currently using the free version but the pro version ($49.95 for unlimited sites) unlocks the “Custom Fields” settings, which may allow you to avoid editing your single-listing.php.)

Adding the Map to Your single-listing.php (listing template) Page

Open your single-listing.php page in a code editor. If you’re using the same code from my first and second post, locate this code:

<div id="rightColumn">
     <!-- This is my right column -->
</div>

Add this code:

<div class="googleMap">
     <?php
          // Create Address from custom fields
          $maddress = (array) do_shortcode('[ct id="ct_Street_Add_text_2a03"]');
          $maddress[] = do_shortcode('[ct id="ct_City_text_407c"]');
          $maddress[] = do_shortcode('[ct id="ct_StateProvi_text_e0af"]');
          $maddress = implode(', ',$maddress) . ' ' . do_shortcode('[ct id="ct_ZipPostal__text_52b7"]');

          //Create new map
          $map = new Mappress_Map(array('width' => 632, 'height' => 200));

          //Create pointer and locate from geocoding
          $poi = new Mappress_Poi(array('address' => $maddress ));
          $poi->geocode();

          //Add the pointers
          $map->pois = array($poi);
          // Display it
          echo $map->display(array() );
          echo $maddress;

     ?>
</div>

Not a lot of styling is required to make this look nice. Here’s the CSS style, listed in my style.css file:

.googleMap {
	float:left;
	width:632px;
	padding: 0;
	margin: 10px 0 20px 0;
}

This floats the “googleMap” div to the left, sets a width to 632 pixels, removes any padding, and adds a margin of 10 pixels to the top and 20 to the bottom.

What the Code Does

This code starts with a div, which has the class "googleMap" added to it. The rest of the code inside the div is PHP. Thankfully Arnold has commented his code for use. Let’s look at the first part.

// Create Address from custom fields
$maddress = (array) do_shortcode('[ct id="ct_Street_Add_text_2a03"]');
$maddress[] = do_shortcode('[ct id="ct_City_text_407c"]');
$maddress[] = do_shortcode('[ct id="ct_StateProvi_text_e0af"]');
$maddress = implode(', ',$maddress) . ' ' . do_shortcode('[ct id="ct_ZipPostal__text_52b7"]');

In this code the key part for you is the [ct id=”something”]. Each of these CT’s correlates to a Custom Press field shortcode. To create these fields go to Custom Press > Content Types > Custom Fields > Add Custom Field.

The four fields I created were Street Address, City, State/Province, and Zip/Postal. Each of these were single line text fields.

Once your fields are created, hover over the name and click the "Embed Code" link. Copy and paste the shortcode into your single-listing.php file. It should replace my shortcode. You should also delete the property="title | description | value" attribute from each shortcode.

Altogether now, this php code will rewrite the address into one line of text. This allows it to print out in order and for Google Maps to do the look up of the location.

//Create new map
$map = new Mappress_Map(array('width' => 632, 'height' => 200));

This code does just what the comment says, it creates a map. In my case the size of the map is 632 pixels wide and 200 pixels tall. Change these numbers to resize your map.

//Create pointer and locate from geocoding
$poi = new Mappress_Poi(array('address' => $maddress ));
$poi->geocode();

This code again does what the comment says, creating a pointer on the map. It figure out where to place the pointer, based on the address entered into the Custom Press fields and combined together in the // Create Address from custom fields code.

//Add the pointers
$map->pois = array($poi);
// Display it
echo $map->display(array() );
echo $maddress;

And finally, the above code adds the created pointer to the map and displays the map and address on your page.

Pretty simple really. Big thanks to Arnold for his help with this!

(Note: Google Maps doesn't always work for locating an address. If a business has recently moved, the address is written wrong, or is incorrect in Google's database, the map may not work.)