jcdesign

<p>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.</p>
<p>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.</p>
<p>No styling has been provided, but the link and map are wrapped in <code>div.adaptive-map</code>.</p>
<h3>Credits</h3>
<p>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.</p>


Vanilla Adaptive Maps

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

WePlugins - WordPress Development Company

<p><strong>WP Maps</strong> is a powerful and user-friendly WordPress map plugin that supports both Google Maps and OpenStreetMap. With just a few clicks, you can create unlimited maps with custom markers, filterable listings, store locators, and dynamic infowindows. Perfect for real estate listings, directories, multi-location businesses, and more.</p>
<ul>
<li>Unlimited maps and locations</li>
<li>Store locator with search and filters</li>
<li>Custom markers, SVG support, and clustering</li>
<li>Info windows on click or hover</li>
<li>KML, KMZ, GeoJSON, and layer integration</li>
<li>OpenStreetMap Maps require no API key; Google Maps support available</li>
</ul>
<h3>Try It Now</h3>
<p>Explore the plugin instantly using the WordPress Playground:<br />
👉 <a href="https://playground.wordpress.net/?plugin=wp-google-map-plugin" rel="nofollow ugc">Try WP Maps</a></p>
<h3>Features</h3>
<h3>🗺️ Map Creation & Display</h3>
<ul>
<li>Create unlimited maps with shortcode support</li>
<li>Display maps in posts, pages, widgets</li>
<li>Auto-center by visitor location or assigned locations</li>
<li>Show/hide markers on load</li>
</ul>
<h3>📌 Marker & Infowindow Controls</h3>
<ul>
<li>Use custom or pre-built marker icons (SVG supported)</li>
<li>Infowindows on click or hover</li>
<li>Bounce/drop animation effects</li>
<li>Center or zoom on marker click</li>
</ul>
<h3>📋 Listings & Filters</h3>
<ul>
<li>Show listing below map with search and filters</li>
<li>Enable category, sort, per-page, and filters</li>
<li>Customize listing layout</li>
<li>Show info window when listing title is clicked</li>
</ul>
<h3>🎨 Design & Themes</h3>
<ul>
<li>Custom map color schema</li>
<li>Set primary/secondary color</li>
<li>Add custom CSS</li>
<li>Responsive & mobile-friendly design</li>
</ul>
<h3>⚙️ Controls & Settings</h3>
<ul>
<li>Enable/disable zoom, fullscreen, map type, scale, street view</li>
<li>Enable search box and “locate me” controls</li>
<li>Limit panning using SW/NE coordinates</li>
</ul>
<h3>🌐 Map Layers & Data</h3>
<ul>
<li>KML/KMZ, Traffic, Transit, Bicycling layers</li>
<li>GeoJSON support</li>
<li>Import/export settings via JSON</li>
</ul>
<h3>💻 Compatibility</h3>
<p>Works with all major page builders and themes:<br />
* Elementor, WPBakery, Divi, Gutenberg, Brizy, Beaver Builder<br />
* Astra, Avada, OceanWP, GeneratePress, Hello Elementor</p>
<p>Here is a quick highlight on the numerous customizable features offered by the free and pro versions of the <strong><a href="https://www.wpmapspro.com?utm_source=wordpress&utm_medium=liteversion&utm_campaign=freemium&utm_id=freemium" rel="nofollow ugc">WP MAPS PRO Version</a></strong>.</p>
<ul>
<li>NO API Key required for OpenStreetMap Maps and API Keys is required for Google Maps.</li>
<li>Fully GDPR-compliant Google Maps integration for secure and privacy-friendly usage</li>
<li>Use Google Maps, OpenStreetMap or Mapbox as your map provider. Easy switching between each map provider.</li>
<li>Show a listing of locations below the map with built-in search and filter controls</li>
<li>Use SVG as marker icons – choose from pre-built SVGs or upload your own</li>
<li>Apply multiple Infowindow designs for custom popup layouts</li>
<li>Create unlimited Google/Leaflet Maps with custom marker icons, categories, and assigned locations</li>
<li>Add and manage multiple locations with rich content and info windows</li>
<li>Assign multiple locations to a single map for complex layouts</li>
<li>Show info windows on click or hover with customizable content</li>
<li>Display maps on any post, page, or widget using shortcode or sidebar widget</li>
<li>Define custom center latitude/longitude for each map</li>
<li>Auto-center map based on assigned locations</li>
<li>Categorize locations for filterable maps and better organization</li>
<li>Choose from over 100+ ready-to-use colorful markers via <a href="https://mapicons.mapsmarker.com/" rel="nofollow ugc">Map Icons Collection</a></li>
<li>Enable marker clustering to handle dense location areas</li>
<li>Choose from 4 map types: Roadmap, Satellite, Hybrid, and Terrain</li>
<li>Set custom map height, width, and zoom level easily</li>
<li>Enable or disable map drag, scroll zoom, and interactivity</li>
<li>Add layers like Traffic, Transit, Bicycling, and more for enhanced context</li>
<li>Support for Street View, 45° imagery, and POV controls</li>
<li>Add visual elements like circles to highlight areas</li>
<li>Fully responsive maps – looks perfect on desktop, tablet, and mobile</li>
<li>Cross-browser compatible – tested on IE8+, Chrome, Firefox, Safari</li>
<li>Multilingual ready – supports WPML and translation plugins</li>
<li>Works across WordPress Multisite, with network-wide activation support</li>
<li>Easily style maps using Snazzy Maps</li>
<li>Built-in search control to locate places directly on the frontend map</li>
<li>Filter markers on the frontend by category</li>
<li>Seamless upgrade to Pro – no data loss when switching from free to paid</li>
</ul>
<h3>🏬 Use Cases – Map Solutions for Every Business</h3>
<p>WP Maps helps you build advanced location maps for any industry. From store locators to real estate maps, here are popular use cases powered by Google Maps or Leaflet:</p>
<ul>
<li>🛍️ Retail Store Locator – Showcase nearby outlets, branches, or chain locations  </li>
<li>🍽️ Restaurant Locator – Help users find your cafes, diners, or food franchises  </li>
<li>🏠 Real Estate Property Map – Display properties with filters for listings  </li>
<li>🏥 Hospital & Clinic Map – Show medical centers, diagnostic labs & walk-ins  </li>
<li>🏋️ Gym & Fitness Center Locator – Promote local gyms, yoga studios & wellness hubs  </li>
<li>🛒 Shopping Mall Directory – Build interactive directories with category filters  </li>
<li>🏨 Hotel & Resort Locator – List resorts, BnBs, and vacation rentals by location  </li>
<li>🚗 Car Dealership Map – Map showrooms, service centers, and authorized dealers  </li>
<li>🏦 Bank & ATM Locator – Help customers locate ATMs and branches  </li>
<li>💊 Pharmacy Finder – Display medical stores and 24/7 pharmacy locations  </li>
<li>💅 Salon & Spa Locator – Show salons, nail bars, and beauty spas nearby  </li>
<li>✂️ Barber Shop Locator – Map grooming centers, barbershops, and hair stylists  </li>
<li>🎓 School & University Maps – Display educational institutions with filters  </li>
<li>🎤 Event Venue Locator – Help users find event halls, venues, and stadiums  </li>
<li>🎬 Cinema & Entertainment Map – List theaters, gaming zones, and arcades  </li>
<li>🖼️ Museum & Art Gallery Locator – Showcase local exhibitions and museums  </li>
<li>🏛️ Government Office Map – Map municipal offices, courts, or embassies  </li>
<li>📦 Post Office & Courier Center Locator – Find shipping centers and drop boxes  </li>
<li>⛪ Religious Center Locator – Show churches, mosques, temples, or community halls  </li>
<li>📚 Library Map – Display public and academic library locations  </li>
<li>🐾 Veterinary & Pet Store Map – Highlight vets, clinics, or pet supply stores  </li>
<li>🔧 Hardware & Home Services Map – Show electricians, repair centers, or hardware stores  </li>
<li>💼 Co-working Space Locator – Help users find shared office spaces or business hubs  </li>
<li>🏗️ Construction & Project Map – Showcase new projects or development plots  </li>
<li>🍷 Wine & Liquor Store Map – Find wine shops and liquor outlets with filters  </li>
<li>🚴 Outdoor & Sports Store Map – Locate gear shops, bike rental points, etc.  </li>
<li>🧸 Toy Store Locator – Promote branded or local toy stores  </li>
<li>🌻 Garden Center & Nursery Map – Help users find garden shops and nurseries  </li>
<li>📖 Bookstore Locator – Showcase independent and chain bookstores  </li>
<li>📱 Electronics Store Map – Map mobile, computer, and appliance retailers  </li>
<li>👗 Clothing Store Locator – Help users find fashion outlets and boutiques  </li>
<li>🛠️ Service Center Locator – Map repair centers for electronics, cars, or devices  </li>
<li>⚖️ Legal & Consultancy Locator – List law firms, advisors, and service offices  </li>
<li>📄 Insurance Office Map – Show agents, offices, and policy assistance centers  </li>
<li>🚛 Dealer & Warehouse Locator – Display regional warehouses and distributors  </li>
<li>🍼 Childcare & Preschool Finder – Help parents locate daycares and nurseries  </li>
<li>🛒 Supermarket & Grocery Store Map – Show supermarkets, mini-markets, or organic stores</li>
</ul>
<p><strong>💡 Whether you’re running a small local shop or a global brand, WP Maps helps you build responsive, searchable, and filterable maps tailored to your business.</strong></p>
<h3>How It Works</h3>
<ol>
<li>Add your locations from <strong>Add Location</strong></li>
<li>Create a map from <strong>Add Map</strong> and assign locations</li>
<li>Use the shortcode (from <strong>Manage Maps</strong>) in posts, pages, or widgets</li>
</ol>
<p><em>Note: Google Maps requires an API key. OpenStreetMap works without a key.</em></p>
<h3>Important Links</h3>
<ul>
<li><a href="https://www.wpmapspro.com/try-now/" rel="nofollow ugc">Live Demos</a></li>
<li><a href="https://www.wpmapspro.com/tutorials/" rel="nofollow ugc">Tutorials</a></li>
<li><a href="https://www.wpmapspro.com/map-hooks/" rel="nofollow ugc">Hooks & Filters</a></li>
<li><a href="https://weplugins.com/support/" rel="nofollow ugc">Support</a></li>
</ul>


WP Maps – Store Locator,Google Maps,OpenStreetMap,Mapbox,Listing,Directory & Filters

WordPress map plugin for Google Maps, OpenStreetMap & Mapbox with store locator, filterable listings & custom markers.

Vanilla Adaptive Maps vs WP Maps – Store Locator,Google Maps,OpenStreetMap,Mapbox,Listing,Directory & Filters