Maps! Maps! Maps Everywhere!
In this page we cover some of the awesome things you can do with maps when you use GeoDirectory.
GD Map Element
Add maps to your site with the GD Map block. As with all GeoDirectory design elements you can use a Widget, Shortcode, or Gutenberg block.
GeoDirectory V2’s GD Map element has a setting called type. This setting has three options
- Auto – GeoDirectory will automatically switch the map type setting based on the GeoDirectory page type where it is shown.
- Directory – can show post type selector, category filter. Most often used on Location page. Also good choice for individual WP Pages.
- Archive – For use in the Archive and Search page templates. When shown in an archive or search page this map type will automatically display the listings that are shown in GD Loop on that archive page.
- Post – For the Detail page to show a single post id on the map. Can also be used in an individual page to show a map point when a listing ID is specified.
Page Design and Map Type
Let’s look at it the other way around. If you are working on a specific page template, which map type to select?
- Location – Directory map. Location pages can show multiple post types with GD Listings, so, use a directory map and adjust the options to show the the post type selector and category filter.
- Archive or Search – Archive map. Archive maps show the results from GD Loop (not GD Listings). You can also use all_posts=1 to show ALL posts of the active CPT.
- Detail – Post map.
Map Basic Options
These options are shown as soon as you start configuring the GD Map element.
The default shortcode is
[gd_map width="100%" height="425px" maptype="ROADMAP" zoom="0" map_type="auto" post_settings="1"]
- Title –
title="My Title"Set an optional title for the element.
- Width –
width="100%"Width of the map in % or px. When set to 100% the map will expand to fill the container in which it is placed.
- Height –
height="425px"The height of the map in %, px, or vh.
- Mapview –
maptype="ROADMAP"the type of map view that will be used by default.
- Zoom – The zoom level. You can experiment with different values. Auto is recommended and will set the zoom automatically to show all the listings within the area of the element.
- Map Type –
map_type="auto"Select which type of map to be displayed. Auto is recommended.
- Enable mouse scroll zoom? –
scrollwheel="1"– Allows scrollwheel users to scroll the map.
Post Type Filter –
Display a map. Use the Directory map type on pages that may display more than one listing Custom Post Type. This pay type should be used on the Location page template.
cat_filter="1" shows the category filter for the current post_type displayed on the map.
post_type="gd_place" for directory maps, usually, so you can choose which post type is shown by default on the map. Use the options in Custom Post Types to change the order.
[gd_map width=”100%” height=”425px” maptype=”ROADMAP” zoom=”0″ map_type=”archive” post_settings=”1″ post_type=”gd_event”]
[gd_map width=”100%” height=”425px” maptype=”ROADMAP” zoom=”0″ map_type=”directory” post_settings=”1″ post_type=”gd_event”]
If you are loading hundreds or thousands of locations on a map, this can demand a lot of resources from your site.
Save those resources by using the Marker Cluster Addon, see the doc here for all the info.
Once installed you can add the marker cluster feature to any map by editing the widget options to enable marker clusters.
For a GD Map shortcode,
Archive Map Options
Use the Archive map type for pages that will only display one listing Custom Post Type. This map should be used on the archive template page and the search page, as we as most non-GD pages like a WordPress page with a map of listings.Use the Post map type for display on the detail page.
Post Map Options
The Post map type is for use on the details page (and only the details page).
- Display the Map APIs utility for getting directions.
- For OSM this is a text field inside the border of the map.
- For Google, this is a text field below the map.
With GDV2 it is possible to create a map that shows listings from a particular location. This feature works the same for GD Map as for GD Listings, the idea being that you can show a map and listings together on a WordPress page.
To use this feature you must know the ‘slugs’ for the location. You can find these on a location page or a detail page.
The slugs here are:
Now add these to t he GD Map element like so:
(If the location fields are not visible, make sure to adjust the map type value to Directory or Archive map types).
The GD Post Directions element can be used in the Detail or Archive item template, or as a widget on the detail page for a CPT that has a physical location.
The output is a link to the maps service. The link uses the lat/lon of the listing location.
GD Post Directions shows a link.
The shiny new GD Post Address widget gives you control over how the location is displayed. You can use it in a sidebar as awidget, add it as a shortcode in a tab, or even as a block.
The GD Post Address element uses a simple tag scheme to allow you to format the address in almost any manner you might want, including adding arbitrary commas, and even line breaks after each address part.
To use it, just add the GD Post Address element as a widget to your sidebar. Hover over the “i” near the input field to see the detailed instructions shown here:
Enter the address tags as required, adding _br or _brc to the tag adds a line break or comma and line break after it.
Available tags: %%street%% %%neighbourhood%% %%city%% %%region%% %%country%% %%zip%% %%latitude%% %%longitude%% %%br%
To show the entire address:
On one line: %%street%%, %%neighbourhood%%, %%city%%, %%region%%, %%country%%, %%zip%%
Import and Export Map and Address Data
GeoDirectory uses the Maps API of your choice to geocode listing addresses during a listing import. If you supply a complete address without latitude and longitude, then the address is sent to the Map API, which returns the closest latitude and longitude known for the address. The coordinates are then stored in the listing.
When entering a listing through the add listing or backend form, you have the opportunity to use a map and drag the pin to the correct location on the map. This sets the latitude and longitude for the post. As soon as the latitude and longitude are known, the coordinates are sent to the Maps API for reverse Geocoding. Unless you have disabled it, once the Maps API returns the result, then the address will be updated with the information from the Maps API.
Reverse Geocoding for import of listings is not available. In order to import listings, address is required. If your CSV has only latitude and longitude, then there are a wide variety of services available to help you set the closest address for your listings. Try a Google search for “reverse geocode csv”.
CSS and PHP Snippets
Remove compass and streetview links from Google Maps with Custom CSS – Snippet in Topic
Remove an arbitrary string from GD Post Address template if neighborhood is empty – Snippet in topic
Get support on our forum, find out more here: https://wpgeodirectory.com/docs-v2/geodirectory/support/
Be default the map shown on the detail page, the one that is in the tabs, that map uses the GD Map element with the option “Use post map zoom and type?” enabled. That means that whenever a user enters the add listing form and adjusts the map zoom, or the map type, that zoom level is saved with the listing and used to determine the zoom of the map on the tab (or any other map shown on the page with the option enabled).
So, want to change that? Remove the default map tab, and add a Shortcode as a new tab with a GD Map element that has the map settings you want.
To override the default settings of shortcodes used in tabs you have to:
Go to the tabs UI for the CPT (Places – Settings – Tab (tab) – Map – Edit
Click Remove to remove the tab
Scroll down to find the “Shortcode” field on the left and click to add a Shortcode to the right side.
Use the shortcode builder button to confgure a GD Map as you like, then save.
Visit the listing to viw your new map.
You might want to use a shortcode like this one:
[gd_map width="100%" height="425px" maptype="ROADMAP" zoom="14" map_type="post" post_settings="0"]
What you don’t want is
post_settings="1"because that will use the zoom settings of the user doing the input.
Looking for an update to your map markers?
Here are some links to map icon resources: