[Plugin: Basic Google Maps Placemarks] List Page Placement/Alignment

The layout of the list in relation to the map can be controlled by the CSS in your theme. For instance, you could do something like

#bgmp_list
{
  float: left;
}

#bgmp_map-canvas
{
  float: left;
}

You can change the list styles in your CSS as well. e.g.,

#bgmp_list li h3
{
  color: red; /* make placemark title font color red */
}

#bgmp_list div a
{
  text-decoration: none; /* remove underline from links in placemark description */
}

etc…

Right now there isn’t a way to natively have a link on the list open the info window on the map. If you’re comfortable with JavaScript and the Google Maps API then you might be able to create a function that would trigger when one of the links was clicked and open the respective info window on the map, but you may need to mod the plugin’s functions.php a bit to make it work.

Version 1.6.1 adds some extra CSS classes to the list elements to help with this.

Here’s an empty CSS template you can use to modify each element:

ul#bgmp_list { }

	li.bgmp_list-item { }

		h3.bgmp_list-placemark-title { }

		div.bgmp_list-description { }

		p.bgmp_list-link a { }

Hi Ian,

Thanks for the help.

Now, I can’t seem to change the text in the placemarker box that comes up on the map–its all uppercase, and I’ve tried changing it with text-transform but to no avail…here’s the command I’m using:

.bgmp_placemark h1 {
text-transform: none;
}

Second, I’m also having difficulty changing the link. With
p.bgmp_list-link a {},
how should the link be written within the brackets?

Thanks a bunch!

The placemark titles changed from h1 to h3 in v1.6 because it’s more semantically appropriate. So, try .bgmp_placemark h3 instead.

What CSS rules do you want to apply to the link? Here’re a few examples:

p.bgmp_list-link a
{
   color: red;
   text-decoration: none;
   font-size: 2em;
}

Ah, ok.

I would like to change the actual link to another page, instead of the current link to google maps. Am I missing something obvious?

Also, still can’t get the pop-up text changed.

You can use the bgmp_list-marker-output filter to make the output whatever you want.

function customBGMPListOutput( $markerHTML, $markerID )
{
  return 'your new output here';
}
add_filter( 'bgmp_list-marker-output', 'customBGMPListOutput', 10, 2 );

$markerHTML is the current markup, and you can use $markerID to lookup info on the individual placemark (to get the title, description, etc).

What’s the URL to the map your site? Depending on how your theme is setup, you may need to use a !important declaration in the CSS rule.

.bgmp_placemark h3
{
  text-transform: none !important;
}

Also, make sure the raw text in the source code isn’t capitalized. If it is, ‘none’ will just let it remain capitalied. You can use ‘lowercase’ or ‘capitalize’ instead.

SP reference for text-transform.

Cool. The !important worked…I think it was inheriting from the h3, h4 body which had an uppercase text-transform.

Thanks for the help and a really great, clean and intuitive plugin!