Customizing the GeoDirectory Map Bubble

The GeoDirectory “map bubble,” embedded in the GD > Map widget and displayable in post type archives, includes a lot of extra spacing and code, and rests on some basic default assumptions, that might make more sense or be more useful in some implementations than in others.

The map bubble template is modifiable – in fact, fully customizable. You should note that, while the template file itself includes the instruction to more the file to “yourtheme/geodirectory/map-popup.php,” if you are using the default Bootstrap styling, you must move the custom template file to “yourtheme/geodirectory/bootstrap/map/map-popup.” The latter is noted in GeoDirectory Customizing Templates documentation, but remains unchanged in the template file itself as of this writing.

The template file in turn relies on a number of GeoDirectory shortcodes that could in turn be changed out. I’ve already discussed elsewhere how the particular custom fields can be modified using such filters, but for a simple implementation I rested on CSS modifications, and one snippet, using a filter where the underlying gd_location_output shortcode is encoded, to get the city field to show in the address output, which does not include the city by default, and which is not directly modifiable via GD > Map.

/** MAP BUBBLE **/
.post-type-archive .geodir-map-canvas .gm-style .geodir-output-location .list-group-item { 
  padding: 0 !important;
}
.post-type-archive .geodir-map-canvas .gm-style .geodir-output-location .list-group-item span { 
  color: black; 
}
.gm-style-iw-chr > button {
  height: 24px !important;
}
.gm-style-iw-ch {
  padding-top: 0;	
}
.geodir-bubble_desc .geodir-entry-title {
  margin-bottom: .25em;
}
.geodir-bubble_desc .geodir-entry-title a { 
  font-size: 14px; 
} 
.geodir-bubble_image {
  display: none;
}
.geodir-bubble-meta-top {
  float: right;
  position: relative;
  z-index: 10;
}
.geodir-bubble-meta-top .geodir-post-rating {
  display: none;
} 
.geodir-bubble-meta-side .geodir_post_meta > span:nth-of-type(3),
.geodir-bubble-meta-side .geodir_post_meta > span:nth-of-type(4)
{
  margin-left: 20px
}

/**
 * SHOW CITY IN ADDRESS FIELD OUTPUT 
 */
add_filter( 'geodir_show_city_in_address', 'mpaa_show_city_in_address' ) ;
function mpaa_show_city_in_address() {
	return true ; 
}