Zh GoogleMap PlacemarkGroupStyle Horizontal

Create Horizontal Group List

Let's modify our styles to show group list horizontally, like this

To do this, go to map details.

Open slider Groups

And change Group CSS field to External. It means, you want to use your own styles, which you'll define in template

After that, you should go to your template CSS files and add your styles. For easy use you can copy styles from component (folder \assets\css, file markergroups.css'), but you have to rename suffix to -external

How find your template files see Using template CSS files

This is my styles to get group list like I show above. I don't pretend it is fine done (because I modify layout of group list twice, and may be some attributes from first time version)

/* My styles */
#GMapsMenu-external #zhgm-menu-external li
{
  list-style-type: none;
  display: inline;
}

#GMapsMenu-external ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#GMapsMenu-external a
{
padding: 3px;
background-color: #369;
border-bottom: 1px solid #fff;
display: inline;
}

#GMapsMenu-external a:link, #zhgm-menu-external a:visited
{
color: #fff;
text-decoration: none;
}

#GMapsMenu-external #zhgm-menu-external a.active {
background-color: #035;
color: #bbb;
                    }
#GMapsMenu-external a:hover
{
background-color: #036;
color: #eee;
}

        
.zhgm-markergroup-a-external
{
  display: inline;
  margin-left: -20px;

}
.zhgm-markergroup-img-external
{
  display: inline;
}
.zhgm-markergroup-text-external
{
  display: inline;
}