Marker Listing Display

November 26, 2014 9:44 am Published by 12 Comments

 

This article covers displaying the Marker Listing on either side of the Map with WP Google Maps Pro. The Custom CSS feature discussed is available with the free version of WP Google Maps, but Marker Listings require the WP Google Maps Pro Addon. This documentation is current for WP Google Maps version 6.

 

Marker Listing Displayed Below the Map

WP Google Maps Pro allows you to display a Marker Listing either above or below your Map.

 

Some Site Owners have asked how they can display the Marker Listing to either side instead. This can be done easily with a bit of Custom CSS.

 

WP Google Maps allows you to add Custom CSS to your plugin settings. (See WordPress Dashboard → Maps → Settings → Advanced.)

 

Display Marker Listing to the Left of the Map

Scroll down to the Custom CSS text block and paste the following code:

 

.wpgmza_map {
float:left !important;
width: 50% !important;
}

.wpgmza_map + div {
clear:right !important;
float:left !important;
width:50% !important;
padding: 10px;
}

 

Then scroll down and click the Save Settings button.

 

Marker Listing Displayed to the Left of the Map

 

Display Marker Listing to the Right of the Map

 


 

This article covers displaying the Marker Listing on either side of the Map with WP Google Maps Pro. If you need further assistance, feel free to post on our Support Forums or visit our Support Desk.

 

Tags: , , , ,

Categorised in:

This post was written by Nick Duncan

12 Comments

  • Jenn says:

    Is is possible to apply this custom css to an individual map and not all maps?

    • Veronique says:

      Hi there. The Map would need to be targeted specifically by using a class. Does this help?

      • patrickdonnelly says:

        I would like to apply this custom css to an individual map and not all maps. You say the map would need to be targeted specifically by using a class. OK, but how can I do this?

        • Veronique says:

          Hi there Patrick,

          You can use a selector like this: `.wpgmza_map_123` to target map ID 123. If you’re looking to target a component outside of the map panel (eg store locator or marker listing) they work in a similar way. Please let us know specifically what you’re trying to alter if you need help with the selectors?

          You are welcome to submit a ticket on our contact page for further help. 🙂

  • AS says:

    This would be great however I can’t seem to get this to work. What pieces of the code need to change or can it be simply cut in paste (which is not working for me).

    .wpgmza_map {
    float:left !important;
    width: 50% !important;
    }

    .wpgmza_map + div {
    clear:right !important;
    float:left !important;
    width:50% !important;
    padding: 10px;
    }

  • ilema says:

    HI Nick
    New to Wpgmaps, great plugin thanks! I also have the pro version. Just finished my first experimental map. Just a quick question. Once the map is done, with marker, url’s etc I want it to be static on the website, its very frustrating when the map zooms in and out with mouse scroll.
    I have looked everywhere, but don’t see an option for that, is there such and option?
    Iléma

    • Veronique says:

      Hi there. When you go to Maps –> Settings –> you should see an option to enable or disable Mouse Wheel Zoom via a toggle button. Does this help?

  • Al Avery says:

    Hello. I found this and it partially addresses a question I had about list placement. Further to that, is it possible to customize the style of the list? I’m looking to do something similar to this: http://www.bywayswestmass.com/activities/biking/ (which I realize was done with a different plug-in).
    At smaller screen widths the list would go above and I assume that could be accomplished via a media query. Also, can the list be configured to be scrollable? So that if there are many locations in the list only a predetermined number appear by default. This is to allow the partial list and map to be viewable on smaller devices.

    • Veronique says:

      Hi there. This can be achieved, however, as it will require various styling changes, you would need to get in touch via our Support Desk, so that a developer can assist n such changes. I hope that helps? 🙂

  • Mike says:

    Was the customCSS function removed in more current versions? I have the pro version, but this doesnt seem to be available

    • Veronique says:

      Hi Mike!

      You are still able to add custom CSS by going to your Maps –> Settings –> Advanced Tab.

      Hope that helps! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.