You are here

Using OpenLayers and GeoField to display maps in Drupal 7 (Part 1)


Required modules

Download and install all these modules:

DependenciesCToolsViews 3Libraries

Configure a map

First we'll need to configure a map, so we have control over how the map is displayed.

Go to Structure > OpenLayers > Maps (admin/structure/openlayers/maps) and add a new map.
Use the Basics settings as shown:

You can change the width/height settings to match your layout.

Keep the default Center & Bounds settings.

Use the Layers & Styles settings as shown:

You'll need to save now before changing the Behaviours settings.

For the Behaviors settings, deselect all except:

  • Navigation (keep subitems deselected)
  • Zoom Control
  • Zoom to Layer (use geofield_formatter and Point zoom level: 12 - 1)
    Use a number higher than 12 to zoom further in

These are our basic behaviours settings, you can of course change these to your personal needs.

Add a map to a contenttype

  • Add a 'Postal address' field to content type
  • Add a 'Geofield' with a 'Geocode from another field' widget
    • Link this Geofield to the Postal address field
    • Use the Google Geocoder as the geocoder

When you'll enter an address in the Address field, the GeoCoder module will use the Google Geocoder handler to look up the address and convert this into GeoField data.

  • Display settings:
    • Format: OpenLayers
    • OpenLayers preset: Node Map (this is the map configuration created above)


When you now create a node, you'll get a map.

You might get a Google Map Data overlay.
This is discussed here:

In Part 2, we'll show how to display multiple locations on one map using views.