Map Posts

Insert a Map Without Leaving the Editor

Map Posts allows you to add location as post metadata and insert a map directly in the post, without ever leaving the editor. No plugin configuration is required; simply install, activate and within the post editor define a location and insert a map.

Post Maps

There are 2 types of map that can be inserted. The first (Post Map) displays only one marker, which is the location currently associated with the post. Note that Map Posts automatically adds a location to every post, defaulting to co-ordinates of 0.00,0.00 (the intersection of the Equator and the prime meridian) and a blank value for the address. Post Maps are typically inserted to display a location that is related to the post.

To actually insert the map, there are two options. If using the visual editor, simply place the cursor in the content area where you would like to insert the map, then click the Insert Post Map button. Alternatively you can simply type in the Post Map shortcode, which is [postmap]. The second option can be done in visual or text editor mode.

All Posts Maps

The second type of map is called the All Posts Map. A marker will be added from every post that:

  1. Is the same post type (if you use custom post types – CPT’s).
  2. Has been published (not saved as a draft or reverted to draft).
  3. Has a custom location (defined as having any co-ordinates other then 0.00, 0.00).

Insert this map if you want to display all post locations in relation to one another.

To actually insert the map, either use the Insert All Posts Map button from the visual editor toolbar, or type in the
shortcode [allpostmap] (in either visual or text editor mode).

 

How to Insert a Map

Map Posts requires no further configuration upon activation; locations and maps are defined entirely within the post (or page) editor.  To add a map:

  1. Ensure Define Map is enabled in Screen Options.
  2. Scroll down to find Define Map and geocode an address, click the location on the preview map or manually type in latitude and longitude.
  3. Optionally provide a width (as percentage, default is 75%); a height (in pixels, maximum < 10,000, default 300); and initial zoom level.


Map Posts define map configuration screen introduced v1.1

  1. In the visual editor, insert the cursor where the map should be inserted and click the Insert Map Post button. Alternatively, in either visual or text editor, type in the shortcode [postmap].


Place cursor and click Insert Post Map (or type in shortcode 		</br>
		<div id ="map1034" style ="width: 75%; height: 300px"></div>
		<script>
		var map = L.map("map1034", { center: [0.00,0.00], zoom: 0 });

		//L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{attribution:'Map data © OpenStreetMap contributors'}).addTo(map);

		//OpenStreetMap maps
		var standardMap = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
			attribution:'Map & Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		}).addTo(map);

		var humanMap = L.tileLayer('http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',{
			attribution:'Map & Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		});

		var standardbwMap = L.tileLayer('https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',{
			attribution:'Map & Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		});


		//Stamen maps
		var stamentonerMap = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png',{
			attribution:'Map © <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0, </a>Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		});

		var stamenterrainMap = L.tileLayer('http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg',{
			attribution:'Map © <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0, </a>Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		});

		var stamencolorMap = L.tileLayer('http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',{
			attribution:'Map © <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0, </a>Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
		});


		//Map overlays
		var trailMap = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png',{
			attribution:'Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
			opacity:1.0
		});

		var topoMap = L.tileLayer('http://c.tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png',{
			attribution:'Data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
			opacity:1.0
		});

		//Defines list of basemaps to provide as layer control parameter
		var baseLayers = {
			'Standard OpenStreetMap': standardMap,
			'Humanitarian OpenStreetMap': humanMap,
			'B&W OpenStreetMap': standardbwMap,
			'B&W High Contrast': stamentonerMap,
			'Natural Terrain': stamenterrainMap,
			'Artistic Map': stamencolorMap
		};

		//Defines list of overlays to provide as layer control parameter
		var overlays = {
			'Trails Overlay': trailMap,
			'Topographic': topoMap
		};

		//Adds the layer control and populates with layers ids
		L.control.layers(baseLayers, overlays).addTo(map);

		var iptmp_marker = L.marker([0.00,0.00]).addTo(map);
		</script>
		</br>.

  1. Update the post or page by clicking Save as Draft, Publish or Update (depending on current publication status).
  2. Verify the location is correct in the Preview Map. A user message will be provided if any configuration issues were encountered.

Preview map showing address location.

  1. Note that the preview map shows the location and uses the configured zoom level but is a fixed width and height. To see the map sized to customized width and height dimensions, view the post in preview mode or visit the website page.

Download Map Posts Free

Map Posts is also available in a free version and can be downloaded from the WordPress.org plugins page.