Create custom Google Maps using Drupal

Create custom Google Maps using Drupal

Dave Myburgh shows you how to create a custom global event map from location data stored in Drupal.

When we decided to update Acquia’s training website to Drupal 7, we wanted to have a map on the event page showing the locations of all our upcoming courses, as well as a map for each course, so users can quickly get a feel of where events will be taking place. Visitors can also open up the maps in Google Maps to obtain directions.

In the past, it’s been difficult to create maps from location data stored in Drupal. There are numerous modules and methods available to deal with this, but finding the right combination can be tricky. For the training site, we figured out how to make it all happen using the following three modules (along with any other modules they require):

In this walkthrough, I’ll show you how we used these modules to generate custom event maps. I’ll begin by configuring each module, using IP Geolocation Views & Maps to collect location data from the site’s visitors, then creating a global map that shows the location of upcoming events along with a pin indicating the location of the viewer.

You can take a look at the results here.

Step 01

First, you need to enable the following modules: Location, Location CCK, GMap, GMap Location and IP Geolocation Views & Maps (IPGV&M). There will be some dependencies that are required – for example, Views – so go ahead and enable those too.

Step 02

Configuring the location module
Configuring the location module

Go to Admin > Config > Content > Location and configure the Location module. Under Main Settings, we enabled theOpen map link in new window option and left the Map Links tab alone. On the Geocoding Options tab, we selectedAddress level accuracy from the Google Maps geocoding minimum accuracy dropdown. We also ticked the Google Maps button for each country we run courses in. If you add an event in a new country, you must come back here and enable geocoding for that country.

Step 03

To configure the GMap module, go to Admin > Config > Services > Gmap, where you’ll enter your Google Maps API key. Enter the map defaults you want to use. We used a default width of 350px, a default height of 160px and no default centre, to fit in with our design for the event pages. The Marker action option can be set to Open info window, so that users get a pop-up when they click the marker.

Step 04

The IPGV&M module enables you to collect location information from your users. When they visit a page with a map on it, their location can be shown on that map and used to give directions to an event. Go to Admin > Config > System > ip_geoloc to configure it. We checked Employ the Google Maps API…, along with Employ Smart IP… as a backup. We also entered the URLs where we wanted to collect user location data: all the event nodes and the main events landing page. We left the other options on their defaults.

Step 05

Creating a location field
Creating a location field

We wanted to show a Google map of the event location on each event node. The Location module can be used to create a location field that takes an address and geocodes it to a latitude and longitude for display on the map. We didn’t set any defaults in the Default value settings, to prevent empty maps appearing if no location data is entered – for example, for an online event.

Step 06

In the Collection settings, we chose to Allow collection of the following elements for a location: Location name, Street location, Additional, Country, City, State/Province(choosing Dropdown from the second menu), Postal code, andCoordinate Chooser (this allows the editor to enter a latitude and longitude if geocoding fails for some reason). In Display Settings, we ticked: Coordinate Chooser, Province name,Country name and Coordinates. The GMap Macro is simply set to [gmap] and our GMap marker is Blue.

Step 07

On the Manage Display tab for the event content type, selectAddress with map as the Format for the Location field. Now when viewing an event with an address, you will see the actual address as well as a map of the location. A link to Google Maps is provided below the map so users can interact with it – for example, to get directions from their location.

Step 08

If a map does not appear after saving an event, go back and edit the node to ensure that a latitude and longitude are now visible below the location data. If not, you might need to enable geocoding for that country, or manually enter the latitude and longitude. If that doesn’t work, double-check all the settings above. As a last resort, check the issues list for that particular module on the Drupal site to see if you can get some help there.

Step 09

The Views module creates a display
The Views module creates a display

The last thing we need to do is create a display that shows all our events across a world map. We can do this using the Views module, in conjunction with the IPGV&M module. Views is one of those ubiquitous modules that tends to be used on all but the very simplest websites. It is required by IPGV&M, so you should already have it enabled at this point.

Step 10

Create a new View (Admin > Structure > Views > Add) and check Create a block with the Display format set to Map (Google API, via IPGV&M). In the settings for this option, you’ll see dropdown selects for the latitude and longitude fields. If you’ve already added those fields to your field list in the View, select them; otherwise leave them blank for now – you can add them after you’ve added the fields. Leave the Default location marker set to default.

Step 11

Map options is where the tricky stuff comes in. You really have to play around with the options in order to get your desired outcome. We used the following:

  1. {“mapTypeId”:“roadmap”,
  2. “disableDefaultUI”:true, “zoom”:2,
  3. “zoomControl”:true, “scaleC
  4. ontrol”:true,“centerLat”:20,
  5. “centerLng”:-30}

In Map style (CSS attributes) add CSS styles for the map itself: here, we’re using height: 400px;width: 100%. SelectCenter the map on the visitor’s current locationfrom Map centering options and enter a hex colour code (without the #) for the user’s icon colour.

Step 12

Add Location: Latitude and Location: Longitude fields to the View. Be sure to set these fields to Exclude from display. Then add whatever other fields you want to show in the pop-up when someone clicks on the marker on the map: for example,Content: Title, Content: Date, Location: City and so on. We added a filter to the View to show only event nodes that had a start date in the future (Content: Date (start date) > now).

Step 13

Save the View and add the block where you want it to show on your site. You can see our map here.

5 tools to make your website go faster

WebPageTest grab

In the runup to his talk at our Generate event, Andi Smith outlines five handy tools for making your site as quick as it can be.

Ensuring your website performs optimally requires measuring several different factors. Here are five tools that can help you analyse your site’s performance during the different stages of the life of your site.

01. Google PageSpeed

Google PageSpeed analyses your website and gives it a rating out of 100 for both mobile and desktop. For the areas on your website that it identifies as suboptimal it will provide suggestions on how you can improve them.

There’s also a tool available for Grunt that allows you to test PageSpeed during build, and an example project showing how to test in Gulp.

Please be careful about where this is included in your workflow as it can increase build completion time considerably.

02. WebPageTest

WebPageTest is a free online tool that evaluates the speed of your website using actual browsers from different locations around the globe at real connection speeds. The results provided show lots of useful performance diagnosis information, such as a video capture of the initial page load of your site; resource waterfall charts and suggestions for improvement.

With WebPageTest, the lower the SpeedIndex your site receives, the better. Chrome Developer Advocate Paul Irish recommends a speed index of under 1000.

03. Chrome Dev Tools Audits

Chrome Developer Tools has a built-in auditing system for assessing web page performance. The audit will give you a breakdown of improvements to consider, such as unused CSS, coupled with the line numbers where you can find the offending items.

To use it, first open the DevTools within Chrome and click the ‘Audit’ tab. In the audit panel, ensure both ’Network Utilization’ and ‘Web Page Performance’ are checked and hit ‘run’ to receive a breakdown. Expanding the items will reveal the files and, if applicable, the line numbers where performance can be optimised.

04. Chrome Dev Tools Timeline

For performance issues that happen within your application such as a poorly performing animation or stuttering scroll you can use the ‘Timeline’ tab within Chrome Dev Tools.

The timeline panel can give you a break down of which events are taking the longest to complete; which frames are taking the longest to render, paint or run scripts; and you can see how memory usage within your application changes over time.

You can find out more information about the timeline panel in the Chrome Developer docs.

05. Google Analytics Performance Anomaly Detection

Once your website is out in the wild, it’s still important to keep a track of its performance. There could be a server issue, or a content author may include a particular large image on the homepage.

We can monitor our website’s page load times using Google Analytics’ Intelligence Events feature. By configuring these events we can detect poor performance and generate an alert when problems start to occur. You can find out more information about this technique on Ilya Grigorik’s blog.

New blogging platform is completely customisable

ContentBear

ContentBear is a new blogging platform that users can customise to their heart’s content.

Setting up a blog can be a daunting experience. Whether you’re creating one for the first time, or setting up the latest part of your range, settling on a theme and design is a task in itself.

ContentBear is a beautiful new blogging platform that puts creativity front and centre. With a focus on easy design and cusomisation, beginners and experts can create artful blogs without having to learn comprehensive code.

ContentBear styles
Different style blocks can be picked easily on ContentBear

Built around a M.E.A.N software stack (that’s Mongo, Express, Angular and Node), ContentBear is a lightning fast platform that can be tweaked and played with on both desktop and mobile.

ContentBear
ContentBear comes with a range of web safe fonts

Packed with loads of refreshing features, including a pin-style filter that allows restricted access to a select audience, ContentBear’s strapline sums it up perfectly: ‘Post Anything, Control Everything.’

Explore everything ContentBear offers and pledge your support by heading over to its Kickstarter page.