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.

supsystic

<h4>WordPress Easy Google Maps</h4>
<ul>
<li><a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="WordPress Easy Google Maps" rel="nofollow ugc">WordPress Easy Google Maps</a></li>
<li><a href="https://supsystic.com/plugins/google-maps-plugin/#faq" title="How to use Easy Google Maps" rel="nofollow ugc">How to use Easy Google Maps</a></li>
<li><a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="WordPress Easy Google Maps" rel="nofollow ugc">Easy Google Maps Demo</a></li>
</ul>
<p>Create <a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="Easy Google Maps WordPress plugin" rel="nofollow ugc">Easy Google Maps</a> in a minute with Easy Google Maps WordPress plugin. Google Map markers with any media: video, images, links, text descriptions. Add google map with shortcode, open it in a popup or use google map widget. An ultimate solution to display google map on the contact page, routes, real estates, delivery areas and more.</p>
<h4>Easy Google Maps Plugin Features</h4>
<ul>
<li><a href="https://supsystic.com/feature/unlimited-maps-and-markers?utm_source=wordpress&utm_medium=Unlimitedmarkers&utm_campaign=maps" title="Unlimited Number of Map Markers" rel="nofollow ugc">Unlimited number</a> of map markers and locations</li>
<li>Map <a href="https://supsystic.com/marker-description-example?utm_source=wordpress&utm_medium=MarkerDescription&utm_campaign=maps" title="Google Maps Marker Description" rel="nofollow ugc">Markers with media description</a>. Text, images, video, email, phone</li>
<li><a href="https://supsystic.com/feature/fully-responsive-google-maps?utm_source=wordpress&utm_medium=fully-responsive&utm_campaign=maps" title="Fully Responsive Google Maps" rel="nofollow ugc">Fully responsive</a></li>
<li>100% customizable. All google map and markers options can be modified</li>
<li><a href="https://supsystic.com/documentation/add-map-site-content?utm_source=wordpress&utm_medium=add-map-site&utm_campaign=maps" title="Add Google Map to the website" rel="nofollow ugc">Add map with shortcode or PHP code</a></li>
<li><a href="https://supsystic.com/documentation/google-map-export-import?utm_source=wordpress&utm_medium=export-importe&utm_campaign=maps" title="Import and Export" rel="nofollow ugc">Google Maps and Markers Import and Export</a></li>
<li><a href="https://supsystic.com/example/google-map-social-share-buttons?utm_source=wordpress&utm_medium=social-share-buttons&utm_campaign=maps" title="Social Share Buttons" rel="nofollow ugc">Map with Social Share Buttons</a></li>
<li><a href="https://supsystic.com/example/alternate-routes-detailed?utm_source=wordpress&utm_medium=alternate-routes&utm_campaign=maps" title="Alternate routes" rel="nofollow ugc">Alternate routes and route steps</a></li>
<li>Map with <a href="https://supsystic.com/exposition-slider-example?utm_source=wordpress&utm_medium=exposition-slider&utm_campaign=maps" title="Exposition slider" rel="nofollow ugc">Exposition slider</a> and <a href="https://supsystic.com/example/table-view?utm_source=wordpress&utm_medium=table-view&utm_campaign=maps" title="Table view of markers" rel="nofollow ugc">Table view of markers</a></li>
<li>Map with <a href="https://supsystic.com/example/horizontal-slider-example/" title="Horizontal Slider" rel="nofollow ugc">Horizontal</a> and <a href="https://supsystic.com/example/vertical-slider-example" title="slider Vertical" rel="nofollow ugc">Vertical slider</a></li>
<li>Map with <a href="https://supsystic.com/example/horizontal-description-slider?utm_source=wordpress&utm_medium=horizontal-description-slider&utm_campaign=maps" title="Horizontal Description Slider" rel="nofollow ugc">Horizontal</a> and <a href="https://supsystic.com/example/vertical-description-slider?utm_source=wordpress&utm_medium=vertical-description-slider&utm_campaign=maps" title="Vertical Description Slider" rel="nofollow ugc">Vertical Description Slider</a>table-view</li>
<li><a href="https://supsystic.com/feature/kml-import-feature?utm_source=wordpress&utm_medium=kml-import-feature&utm_campaign=maps" title="KML filter" rel="nofollow ugc">KML layers, import and filters</a></li>
<li><a href="https://supsystic.com/feature/different-layers?utm_source=wordpress&utm_medium=different-layers&utm_campaign=maps" title="Layers" rel="nofollow ugc">Traffic, Transit and Bicycling Layers</a></li>
<li><a href="https://supsystic.com/feature/heatmap?utm_source=wordpress&utm_medium=heatmap&utm_campaign=maps" title="Heatmap" rel="nofollow ugc">Heatmap Layer</a></li>
<li><a href="https://supsystic.com/feature/markers-front-end-editing?utm_source=wordpress&utm_medium=markers-front-end-editing&utm_campaign=maps" title="Front-end markers editing" rel="nofollow ugc">Front-end map and markers editing</a></li>
<li><a href="https://supsystic.com/feature/clusterization?utm_source=wordpress&utm_medium=clusterization&utm_campaign=maps" title="Google Maps Clusterization" rel="nofollow ugc">Map Markers and Locations groups (clusterization)</a></li>
<li><a href="https://supsystic.com/feature/figures-feature?utm_source=wordpress&utm_medium=figures-feature&utm_campaign=maps" title="Draw Figures and Paths on the Map" rel="nofollow ugc">Draw figures and paths on the map</a></li>
<li><a href="https://supsystic.com/feature/different-map-styles?utm_source=wordpress&utm_medium=different-map-styles&utm_campaign=maps" title="Map style" rel="nofollow ugc">Map style custom themes</a></li>
</ul>
<p>More <a href="https://supsystic.com/google-maps-easy-usage-examples?utm_source=wordpress&utm_medium=examples&utm_campaign=maps" title="Google Maps Examples" rel="nofollow ugc">Google Maps Examples</a></p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Ej8EtuLcLZk?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="Easy Google Maps" rel="nofollow ugc">Easy Google Maps</a> plugin is an excellent way to make a beautiful map on your website and to help your clients in discovering your location on the google map. For example, if you are an owner of a restaurant, you will have much more possibilities of attracting visitors by using this plugin. The Google map allows you not only to mark the place of your business location but also to show people its coloured pictures. You can attach photos and videos to the google map marker description and make your potential visitors to feel the atmosphere inside your restaurant, shop or another place of interest.</p>
<p>Google Maps for WordPress are very useful these days usually in contact forms which showcase the correct location of the business or a place of interest. <a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="Easy Google Maps" rel="nofollow ugc">Google Map by Supsystic</a> plugin require only location input to mark the point accurately as it will auto-fetch the live map details from Google map. Marking different locations on the Google map can be done easily with the google map marker options the plugin provides and that too with colourful icons for interaction on the google map.</p>
<h4>Easy Google Maps Plugin Support</h4>
<p>If you have any problem or feature request for the <a href="https://supsystic.com/plugins/google-maps-plugin?utm_source=wordpress&utm_medium=description&utm_campaign=maps" title="Easy Google Maps" rel="nofollow ugc">Easy Google Maps by Supsystic</a>, please <a href="https://supsystic.com/contact-us/?utm_source=wordpress&utm_medium=contact-us&utm_campaign=maps" title="Contact Us" rel="nofollow ugc">let us know</a>!</p>
<h4>Ultimate Maps Plugin by Supsystic</h4>
<p>If you are looking for Google Maps alternative, here is a solution – try our Ultimate Maps Plugin. <a href="https://supsystic.com/plugins/ultimate-maps/?utm_source=wordpress&utm_medium=description&utm_campaign=ultimate-maps" title="Ultimate Maps WordPress plugin by Supsystic" rel="nofollow ugc">Supsystic Ultimate Maps plugin</a> was developed after the changes in Google maps pricing policy.</p>
<p>Plugin includes:<br />
* <strong>Bing maps</strong><br />
* <strong>OpenStreetMap or OSM</strong><br />
* <strong>Leaflet maps</strong><br />
* <strong>Mapbox</strong><br />
* <strong>Thunderforest</strong></p>
<p><a href="https://wordpress.org/plugins/ultimate-maps-by-supsystic" title="Ultimate Maps by Supsystic" rel="ugc">Ultimate Maps by Supsystic</a> provides all the nessesary functions and features such as:</p>
<ul>
<li><a href="https://supsystic.com/example/marker-description?utm_source=wordpress&utm_medium=Unlimitedmarkers&utm_campaign=ultimate-maps" title="Unlimited Number of Map Markers" rel="nofollow ugc">Unlimited markers</a> with description, links, images, videos and more</li>
<li><a href="https://supsystic.com/documentation/markers-categories?utm_source=wordpress&utm_medium=Markerscategories&utm_campaign=ultimate-maps" title="Markers categories" rel="nofollow ugc">Markers categories</a></li>
<li>Fully responsive</li>
<li><a href="https://supsystic.com/documentation/ultimate_maps_properties_settings?utm_source=wordpress&utm_medium=PropertiesCustomizing&utm_campaign=ultimate-maps" title="Maps Properties Customizing" rel="nofollow ugc">100% customizable</a></li>
<li>Maps and Markers <a href="https://supsystic.com/documentation/ultimate_maps_export-import?utm_source=wordpress&utm_medium=export-import&utm_campaign=ultimate-maps" title="Import and Export" rel="nofollow ugc">Import and Export</a></li>
<li><a href="https://supsystic.com/example/exposition-slider?utm_source=wordpress&utm_medium=exposition-slider&utm_campaign=ultimate-maps" title="Exposition slider" rel="nofollow ugc">Map with Exposition slider</a></li>
<li><a href="https://supsystic.com/example/kml-layer?utm_source=wordpress&utm_medium=kml-layer&utm_campaign=ultimate-maps" title="KML layer" rel="nofollow ugc">KML layers Import and </a></li>
<li><a href="https://supsystic.com/example/clustering?utm_source=wordpress&utm_medium=clustering&utm_campaign=ultimate-maps" title="Ultimate Maps Clustering" rel="nofollow ugc">Map Markers Clustering</a></li>
<li><a href="https://supsystic.com/example/linked-markers?utm_source=wordpress&utm_medium=linked-markers&utm_campaign=ultimate-maps" title="Map Stylization" rel="nofollow ugc">Maps Themes and Styles</a></li>
<li><a href="https://supsystic.com/example/horizontal-slider-ultimate-maps?utm_source=wordpress&utm_medium=horizontal-slider&utm_campaign=ultimate-maps" title="Horizontale Slider" rel="nofollow ugc">Ultimate Maps markers with slider mode</a></li>
<li><a href="https://supsystic.com/example/ultimate-maps-shape/?utm_source=wordpress&utm_medium=Shapesexample&utm_campaign=ultimate-maps" title="Shapes on the Map" rel="nofollow ugc">Shapes</a></li>
<li><a href="https://supsystic.com/documentation/maps-static-api?utm_source=wordpress&utm_medium=static-api&utm_campaign=ultimate-maps" title="Maps Static API" rel="nofollow ugc">Maps Static API</a></li>
<li><a href="https://supsystic.com/example/linked-markers?utm_source=wordpress&utm_medium=linked-markers&utm_campaign=ultimate-maps" title="Linked markers" rel="nofollow ugc">Linked markers</a> and other</li>
<li>More <a href="https://supsystic.com/ultimate-maps-examples?utm_source=wordpress&utm_medium=examples&utm_campaign=ultimate-maps" title="Ultimate Maps Exampes" rel="nofollow ugc">Ultimate Maps Exampes</a></li>
</ul>
<h4>Translations in your language</h4>
<p>You have an incredible opportunity to get PRO version for free. Just Make Translation of the Easy Google Maps by Supsystic plugin! It will be amazing if you take advantage of this offer! Available Translations:</p>
<ul>
<li>English</li>
<li>Albanian</li>
<li>Bulgarian</li>
<li>Chinese (Taiwan)</li>
<li>Danish</li>
<li>Dutch</li>
<li>French</li>
<li>German</li>
<li>Italiano</li>
<li>Norwegian (Bokmål)</li>
<li>Persian</li>
<li>Polish</li>
<li>Portuguese (Portugal)</li>
<li>Russian</li>
<li>Spanish</li>
</ul>
<h4>Our plugins</h4>
<ul>
<li><a href="https://wordpress.org/plugins/gallery-by-supsystic/" title="Photo Gallery by Supsystic" rel="ugc">Photo Gallery by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/pricing-table-by-supsystic/" title="Pricing Table by Supsystic" rel="ugc">Pricing Table by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/ultimate-maps-by-supsystic/" title="Ultimate Maps by Supsystic" rel="ugc">Ultimate Maps by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/contact-form-by-supsystic/" title="Contact Form by Supsystic" rel="ugc">Contact Form by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/data-tables-generator-by-supsystic/" title="Data Tables Generator by Supsystic" rel="ugc">Data Tables Generator by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/slider-by-supsystic/" title="Slider by Supsystic" rel="ugc">Slider by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/social-share-buttons-by-supsystic/" title="Social Share Buttons by Supsystic" rel="ugc">Social Share Buttons by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/coming-soon-by-supsystic/" title="Coming Soon by Supsystic" rel="ugc">Coming Soon by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/popup-by-supsystic/" title="PopUp by Supsystic" rel="ugc">PopUp by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/digital-publications-by-supsystic/" title="Digital Publications by Supsystic" rel="ugc">Digital Publications by Supsystic</a></li>
<li><a href="https://wordpress.org/plugins/live-chat-by-supsystic/" title="Live Chat by Supsystic" rel="ugc">Live Chat by Supsystic</a></li>
</ul>


Easy Google Maps


It you want to create a map with a few FIXED (aka STATIC) markers (and categorisation) then this looks like it would do the job very well.



If you want to dynamically add markers in PHP or automatically add markers from images with GPS info (attached or not) then I have a pending query as to whether this is possible (see: supsystic.com/topic/can-you-add-attached-images-with-gps-or-specifiy-markers-in-shorcode/).


Very few Shortcode Examples - so unsure of capabilities

Google Maps with markers, locations and clusterization, KML layers and filters. Custom Google map markers with text, images, videos, links.

Vanilla Adaptive Maps vs Easy Google Maps