jcdesign

A way to include an Adaptive Map, based on <a href="http://bradfrostweb.com/blog/post/adaptive-maps/" rel="nofollow ugc">Brad Frost’s Adaptive Maps pattern</a>, without requiring an external JavaScript library.
The basic premise is that we should be using mobile devices’ far better-suited mapping applications rather than attempting to frame maps in our own websites. Users w/ larger screens will get a full map in an iframe.
No styling has been provided, but the link and map are wrapped in <code>div.adaptive-map</code>.
<h3>Credits</h3>
All props to <a href="http://bradfrostweb.com/blog/post/adaptive-maps/" rel="nofollow ugc">Brad Frost</a> who presented the idea quite a while ago.

Vanilla Adaptive Maps

Map any address with a shortcode. Mobile users get a static map; desktop users will see a google map.

WebFactory

Are you using Gutenberg and need a map? This is the map block for you! Install, active, add to content. Done! No nonsense, no unneeded settings. Simple and clear in its function – as any Gutenberg block should be.
Gutenberg is now a core feature so please update to WordPress v5, or install the <a href="https://wordpress.org/plugins/gutenberg/" rel="ugc">Gutenberg plugin</a>.
<h4>Plugin Features</h4>
Works as any other Gutenberg block with the following settings: 
* address, or coordinates 
* zoom 
* map height 
* API key – once saved in one block it’s used in all others
<blockquote>
Need a non-Gutenberg map solution? Check out our free <a href="https://wordpress.org/plugins/google-maps-widget/" rel="ugc">Google Maps Widget</a> plugin.
</blockquote>
For instruction on how to generate a Google Maps API key please read this <a href="https://www.gmapswidget.com/documentation/generate-google-maps-api-key/" rel="nofollow ugc">article</a>.

Map Block for Google Maps

Map block for Gutenberg editor powered by Google Maps. Simple. Fast. Just a map block.

Vanilla Adaptive Maps vs Map Block for Google Maps