Creating Maps using GeoLocation

The app “Maps” makes it possible to create maps and add markers that indicate different locations on either persons or companies/groups. Using users and user groups, you can render markers on your map corresponding to the users’/user group’s Address, Address 2, Zip code, City and Country. You can customize the map and make it show only the locations you specifically pick out.

There’s also a search function implemented, that allows a frontend user to enter an address, a name or just a city, and search within different radii.

Figure 1.1 Frontend example of a map with markers on them, each representing a user

First, you must attach the Maps app to a paragraph. Then you will see the settings available for this app.

Under Groups, Users and Smart search (Figure 3.1), you can select which users/groups/smart search groups you want to show on the map, depending on whether they have an address/city and country registered. If you want to use only the subgroups for a user group, select Use only subgroups.

Figure 3.1 The Groups, Users and Smart search settings for selecting map data

If you choose a group under Groups, the group address will be shown. However, if you choose that same group under Users, every user in that group’s addresses will be shown.

Under Map Settings (Figure 4.1), you can customize the map’s appearance.

Figure 4.1 The Map settings

You can:

• Resize the map with the width and height
• Choose a map type
• Set a default zoom level and center of the map
  • The map center can be entered manually as coordinates
  • If you click Show Location on map, you can drag the marker on the map directly instead and click Save location to render the new coordinates

With the Marker Settings and Clusterer Settings (Figure 4.2), you can customize how a person in frontend should be able to interact with the map.

Figure 4.2 The Marker and Clusterer settings

In Marker Settings, you can:

• Choose how a frontend user should activate the markers on the map to show their individual information (click, double-click, mouse-over)
• Choose a marker image for the markers

In Clusterer Settings, you can enable clustering for those pointers that are close to each other. This reveals even more settings to customize the cluster images, text color and size.

In the Location List Settings and Template Settings, you can customize the template and enable a location list (Figure 5.1).

Figure 5.1 The Location List and Template settings

A location list is a list of all the users/groups shown on the map with their information beneath. The frontend user can then click/double-click/mouse-over to zoom in on them on the map or to get their spot on the list highlighted. In (Figure 5.2), you can see a frontend example of a location list.

Figure 5.2 A frontend example of a location list