miccolis

<p>Using the MapBox plugin you can quickly and easily embed maps from MapBox Hosting into your site. MapBox hosting is an easy-to-use service for hosting maps. Whether you design custom maps in <a href="http://mapbox.com/tilemill/" rel="nofollow ugc">TileMill</a> or use the existing layers in our tileset library, MapBox makes it easy get maps onto your site.</p>
<ol>
<li>Visit <a href="http://tiles.mapbox.com" rel="nofollow ugc">tiles.mapbox.com</a> and find the map you want to embed.</li>
<li>When viewing the map click the “Embed” button. It’s in the bottom right corner of the map.</li>
<li>Adjust the height and width of the map in the popup.</li>
<li>When you’re happy with the map, copy the ’embed code’. It begins with “<iframe”.</li>
<li>On your WordPress site add a new post, or edit an existing one.</li>
<li>Switch the editor to “HTML” and paste the embed code where you’d like the map.</li>
<li>Save, then view your post and enjoy the map!</li>
</ol>
<p>You may notice that the MapBox plugin converts the embed code into a WordPress <a href="http://en.support.wordpress.com/shortcodes/" rel="nofollow ugc">shortcode</a>. The <code>mapbox</code> shortcode can take several options, all of which are optional. The order doesn’t matter at all.</p>
<ul>
<li><code>layers</code> – a comma seperated list of layers. The format of each layer is <code>{account}.{layer}</code>.</li>
<li><code>width</code> – the desired width of the map, in pixels.</li>
<li><code>height</code> – the desired height of the map, in pixels.</li>
<li><code>lat</code> – The latitude where the map should be centered.</li>
<li><code>lon</code> – The longitude where the map should be centered.</li>
<li><code>z</code> – The ‘zoom level’ of the map. Zoom level ’12’ is a street level view, ‘1’ is the view from the moon.</li>
<li><code>options</code> – Controls and other options, a comma seperated list.</li>
</ul>


MapBox

MapBox makes it easy to embed beautiful maps in your posts.

Yuri Baranov

<p>YaMaps plugin is the simplest way to insert Yandex maps on your site. The plugin has a user-friendly interface. You can visually put placemarks on your Yandex map, move them with your mouse, change icons and much more.</p>
<p>For use with the new Gutenberg editor, you need add the classic editor block first!</p>
<p>For the map search to work correctly and find routes, you may need to set an API key (JavaScript API и HTTP Geocoder) on the plugin settings page.</p>
<h4>Plugin Highlights:</h4>
<ul>
<li>You can add maps to pages without coding.</li>
<li>Or you can visually edit the shortcodes in the editor.</li>
<li>You can add any number of maps to one page.</li>
<li>You can add multiple markers to one card.</li>
<li>You can add markers with hyperlinks.</li>
<li>You can select the icon and it’s color of the marker in the colorpicker.</li>
<li>You can select type of map (Map, Satellite, Hybrid), map zoom, map controls in the visual editor.</li>
</ul>
<p><iframe loading="lazy" title="YaMaps — Яндекс.Карты для WordPress — видеоинструкция" width="750" height="422" src="https://www.youtube.com/embed/m7YncsBrL5g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>Shortcodes Structure</h4>
<ul>
<li>yamap center – Map center coordinates</li>
<li>yamap height – Map height</li>
<li>yamap zoom – Map zoom (0 to 19)</li>
<li>yamap scrollzoom – Scrollwheel zoom lock (scrollzoom=”0″ for lock)</li>
<li>yamap mobiledrag – Map dragging can be disabled for mobile devices (mobiledrag=”0″ for lock)</li>
<li>yamap type – Map type (yandex#map, yandex#satellite, yandex#hybrid)</li>
<li>yamap controls – Map controls separated by a semicolon (typeSelector;zoomControl;searchControl;routeEditor;trafficControl;fullscreenControl;geolocationControl)</li>
<li>
<p>yamap container – ID of the existing block in the WP template. The map will be placed in the block with this ID. The new block in the content will not be created.</p>
</li>
<li>
<p>yaplacemark coord – Placemark coordinates</p>
</li>
<li>yaplacemark icon – Placemark icon (Yandex.Map icon type or url of your own image)</li>
<li>yaplacemark color – Marker color</li>
<li>yaplacemark name – Placemark hint or content</li>
<li>
<p>yaplacemark url – Linked URL or post with ID will be opened by click on the placemark</p>
</li>
<li>
<p>You can insert multiple placemark codes inside the maps’s shortcode.</p>
</li>
</ul>
<h4>Shortcode Example</h4>
<pre><code>[yamap center="55.7532,37.6225" height="15rem" zoom="12" type="yandex#map" controls="typeSelector;zoomControl"][yaplacemark coord="55.7532,37.6225" icon="islands#blueRailwayIcon" color="#ff751f" name="Placemark"][/yamap]
</code></pre>


YaMaps for WordPress Plugin

The plugin allows you to add Yandex Maps (Яндекс Карты) to pages of your site using a WordPress visual editor.

MapBox vs YaMaps for WordPress Plugin