{"id":2742,"date":"2026-10-20T08:36:22","date_gmt":"2026-10-20T07:36:22","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/how-to-customize-the-map-popup\/"},"modified":"2026-10-20T08:39:00","modified_gmt":"2026-10-20T07:39:00","slug":"how-to-customize-the-map-popup","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/how-tos\/how-to-customize-the-map-popup\/","title":{"rendered":"How to customize the map popup (map bubble)"},"content":{"rendered":"\n

The popup that opens when a visitor clicks a marker on a GeoDirectory map is called the map bubble. You can choose which fields it shows from the field settings, restyle it with CSS, or change its layout with a template override.<\/p>\n\n\n\n

Choose which fields appear<\/h2>\n\n\n\n
    \n
  1. Go to Places > Settings > Custom Fields.<\/li>\n\n\n\n
  2. Open a field and, under “Show in extra output location”, tick Map bubble.<\/li>\n\n\n\n
  3. Save the field and repeat for each field you want in the bubble.<\/li>\n<\/ol>\n\n\n\n

    The bubble always shows the listing title, an image, the rating and the favorite button. Fields you tick appear below those.<\/p>\n\n\n\n

    Restyle it with CSS<\/h2>\n\n\n\n

    The bubble is wrapped in the .gd-bubble<\/code> class. Right-click inside an open bubble and choose Inspect to find the class of the part you want to change, then add your CSS in Appearance > Customize > Additional CSS. If logos look too big, see How to Fix Logo Size Issues in Map Bubbles?<\/a>.<\/p>\n\n\n\n

    Change the layout with a template override<\/h2>\n\n\n\n

    The bubble layout is a template made of GeoDirectory shortcodes, such as [gd_post_title]<\/code>, [gd_post_images]<\/code> and [gd_output_location location="mapbubble"]<\/code>. To change the order or add your own content:<\/p>\n\n\n\n

      \n
    1. Copy wp-content\/plugins\/geodirectory\/templates\/bootstrap\/map\/map-popup.php<\/code>.<\/li>\n\n\n\n
    2. Paste it into your child theme as wp-content\/themes\/your-child-theme\/geodirectory\/bootstrap\/map\/map-popup.php<\/code>.<\/li>\n\n\n\n
    3. Edit the copy. You can move, remove or add GeoDirectory shortcodes.<\/li>\n<\/ol>\n\n\n\n

      Use a child theme, so a theme update doesn’t remove your copy. If the site uses the legacy (non-Bootstrap) design style, the file is templates\/map-popup.php<\/code> and the copy goes in your-child-theme\/geodirectory\/map-popup.php<\/code>. More in Customizing templates<\/a>.<\/p>\n\n\n\n

      Images in search results and listing cards<\/h2>\n\n\n\n

      Images on listing cards in archive and search results come from the Archive item template, not the map bubble. Edit the page set as Archive item page in GeoDirectory > Settings > General > Pages and place a GD > Post Images block where you want the image.<\/p>\n","protected":false},"excerpt":{"rendered":"

      The popup that opens when a visitor clicks a marker on a GeoDirectory map is called the map bubble. You can choose which fields it shows from the field settings, restyle it with CSS, or change its layout with a template override. Choose which fields appear The bubble always shows the listing title, an image, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,432],"class_list":["post-2742","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-how-tos"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2742"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2742\/revisions"}],"predecessor-version":[{"id":2852,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2742\/revisions\/2852"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2742"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2742"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}