SimpleMap plugin - How to render it on a webpage? This question is coming from a complete noob, so pls bear with me.

I am using SimpleMap plugin in a Craft site. I am able to install and configure the plugin, create a field, add it to a section etc. I am not sure how to embed the map as shown in CP, into an article on the site.

In short How to display the map frontend as it is displayed in the control panel?
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;