WordPress.org

Ready to get started?Download WordPress

Forums

Basic Google Maps Placemarks
[resolved] List Page Placement/Alignment (9 posts)

  1. JakeClaro
    Member
    Posted 2 years ago #

    First, great plugin Ian.

    Now onto my question. Is there any way to have the list placed somewhere other than directly below the map?

    I would like to have the list aligned left and the map aligned right, for instance, on a full-page layout.

    Also, how do I change the list stylings? Is there a way to make the list link go to a placemark on the map?

    Thanks!

    http://wordpress.org/extend/plugins/basic-google-maps-placemarks/

  2. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    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 { }
  4. JakeClaro
    Member
    Posted 2 years ago #

    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!

  5. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    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;
    }
  6. JakeClaro
    Member
    Posted 2 years ago #

    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?

  7. JakeClaro
    Member
    Posted 2 years ago #

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

  8. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  9. JakeClaro
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic