Beaver Builder Google Static Map - WP Developers

Beaver Builder Google Static Map

I, for one, don't tend to use an embedded Google Map on a website when I'm looking for directions to their physical location. Rather, I tend to look for the 'larger map' link so I can plot directions and see the map on a bigger screen.

Inspired by the great feedback and results from the optimised video embed plugin, I used this as an excuse to create a couple of new things for Beaver Builder, in an attempt to optimise page load speed a bit more:

Google Places autocomplete field

Beaver Builder Google Places Autocomplete Field

and with that, a

Static Google Map

(This is the actual module in use, so you can see the output)

Here's the settings form for the map:

Beaver Builder Static Google Map settings form

and for the markers (you can specify multiple):

BB Static Map Marker settings

Performance Improvement

I'm just going to show you the figures, and then provide my thoughts after.

With a regular embed, using the Beaver Builder map module (which simply uses an iframe), we see the following results:

With the static map module, we see:

So, I know what you're thinking - increasing the speed from 1.4 seconds to 887 milliseconds is approximately 36% improvement, which isn't bad, but it certainly isn't breaking news.

I even knew that the performance gains wouldn't be huge when I started writing the module, but here's the thing: thanks to the awesome setup at Kinsta I'm using HTTP/2 for my/my client's websites.

In the past, the biggest killer of performance was lots and lots of HTTP requests (you'll notice that in the iframe example, there's 101 requests, and only 39 for the static map) - HTTP/2 squashes that problem.

If you're not using HTTP/2 (which requires SSL and a compatible host - which is common nowadays), then you'll likely benefit from this a lot more.

On top of the attempt to improve performance, I now have an autocomplete field for Beaver builder that I could easily use for a JavaScript embedded Google Map in the future (which would allow map controls, like zooming etc to be added).

So perhaps you'll find it useful, perhaps you won't - but if you do use it, please provide feedback in the comments below!

Considerations

Bear in mind that this won't show custom markers if you're using it on a local development environment, as the URL to the marker image will be relative to local server, which Google can't get to (we hope...).

Download

This module is included in the WPD BB Additions plugin, which is located, currently, on GitHub, here, so you're getting more than just this module.

To download it, follow these instructions (note the text you see in the image below might be different to the link you click on):

Here's the thing... I love to write and teach, but I'm terrible at self-promotion. If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

3 thoughts on “Beaver Builder Google Static Map

  1. Excellent work, Doug. This makes a big improvement in page optimization over the standard module. Thanks for taking the time and initiative to build this plugin.

    Feature request: The href on the static map image currently links to g maps at a specific raw address only. Would it be possible to link directly to a /place/ business page on g maps instead?

    i.e.
    Dr. Haena Kim (short link: https://goo.gl/maps/76hMkB4V3xA2 )
    instead of just to an office building address like this
    https://goo.gl/maps/UbgxMTEWkkv

    • Hi Ross – thanks for commenting!

      Theoretically this would be possible, but I think what the easiest thing would be is to provide an input field so the URL can be overridden. Perhaps later I can see if I can provide a better link based on the autocomplete dropdown.

      I’ll add to the next release.

Leave a Comment