SimpleMap plugin - How to render it on a webpage?
Someone asked this question on the Simplemap Github issues, read the answer here.

I've copy/pasted pasted the answer below in case that link dies, but stress this is not my code, the credit goes to Tam

The plugin returns an array containing lat, lng, and others (see docs). You can use these as the location for any front-end map library (e.g. Google Maps or Mapbox).

Using Google Maps as an example:

&lt;div id="map"&gt;&lt;/div&gt;
&lt;script&gt;
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: {{ entry.myMapField.lat }},
        lng: {{ entry.myMapField.lng }}
      },
      zoom: 8
    });
  }
&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap" async defer&gt;&lt;/script&gt;


And Mapbox:

&lt;script src='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'&gt;&lt;/script&gt;
&lt;link href='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' /&gt;

&lt;div id='map' style='width: 400px; height: 300px;'&gt;&lt;/div&gt;
&lt;script&gt;
  mapboxgl.accessToken = 'pk.eyJ1IjoiZXRoZXJjcmVhdGl2ZSIsImEiOiJjaWhjMDQ4cDUwMDg0dm9ranV3ZWZtY3B2In0.KQKSKysuha7MW19Q_cCJCA';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [
      {{ entry.myMapField.lng }},
      {{ entry.myMapField.lat }}
    ]
  });
&lt;/script&gt;