How to create a View of locations on a CommonMap

Last updated on
2 October 2017

The following directions show you how to take multiple Geolocation Field results and display them as markers within a single map using Views in Drupal 8.

Setup:

  1. Create a View. Add entities (these will show up as the marker titles if displayed). Filter and sort as desired.
  2. Add the relevant Geolocation Field under 'fields' in that View and exclude it from the display if necessary. Note: If this field's format is set to the 'Geolocation Google Maps API - Map' then it will overload your marker titles and they will not work correctly.
  3. Under the header 'FORMAT,' hit the link after 'format:' and select 'Geolocation Google Maps API - CommonMap'.
  4. Under that format's setting configure:
    1. The 'Geolocation source field' to the Geolocation Field you added in step 2.
    2. The 'Title source field' to the content's title if it shows up in the drop down selector. This will add the title to the marker, defaulting as a larger bold print. Adding the title can also be done by adding the title to 'Fields' in step 5 where it defaults to a smaller print.
    3. The map center. Important: The map needs to know where to center itself. There is a number of options available which hopefully are self-explanatory. Depending on your use of the map, you will want to arrange these options in an order that works best for you, turning them on or off as you see fit. Each option will, if it can be applied, supersede any following option. This is a powerful tool you should configure correctly to help keep your site from breaking, ideally allowing a fallback should one method fail or be unavailable. Presently, these options include:
      1. Ask client for location via HTML5 geolocation API.
      2. Use the first returned value of the query as the center.
      3. Automatically fit the map boundaries to the query results, disregarding any set center or zoom).
      4. Provide fixed latitude and longitude.
    4. The remaining items you may configure to your liking, but the default is fine for these directions.
  5. Add to 'Fields' any entities you wish to appear as a marker title, since any content generated in the query will be displayed as information for the markers unless hidden. Note: Clicking on a marker will display the content of what would be visible if selecting the regular format in the marker popup.Note: As a failsafe to AJAX problems, the query results will be displayed as a simple list by default, only hidden when the map handling starts.

Attachment views

If you want to display the items on the map additionally as regular list / non-map, you can use the "attachment" views mechanic. When using the "inherit filters" setting there, map and non-map will have identical content.

Dynamic map / Boundary filtering / "AirBnB" mode

With this option, you can feed back the changes you make on the map boundaries (moving, zooming etc.) to views and updated the results.
To make this works you need to:

  • Enable AJAX on the view
  • Add a boundary filter and expose it.

Help improve this page

Page status: No known problems

You can: