<p>Someone asked this question on the Simplemap Github issues, <a href="https://github.com/ethercreative/simplemap/issues/11" rel="nofollow">read the answer here</a>.</p>

<p>I've copy/pasted pasted the answer below in case that link dies, but stress this is not my code, the credit goes to <a href="https://github.com/Tam" rel="nofollow">Tam</a></p>

<p>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).</p>

<p>Using Google Maps as an example:</p>

<pre><code>&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;
</code></pre>

<p>And Mapbox:</p>

<pre><code>&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;
</code></pre>

CC BY-SA 3.0
2016-09-26T21:34:11.253Z
Paul: per Stack, it's recommended to add some sample code to your answer to better answer the question and in case that link goes away.
RitterKnight
CC BY-SA 3.0
2016-09-27T08:44:10.510Z
Done. I just didn't want anyone thinking it was my code or the author thinking I had stolen it.
Paul Frost
CC BY-SA 3.0
2016-09-26T20:18:30.037Z
2016-09-27T08:42:35.843Z
2016-09-27T08:42:35.843Z
Paul Frost
<p>This question is coming from a complete noob, so pls bear with me.</p>

<p>I am using <a href="https://github.com/ethercreative/simplemap" rel="nofollow">SimpleMap plugin</a> 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.</p>

<p><strong>In short</strong> How to display the map frontend as it is displayed in the control panel?</p>

CC BY-SA 3.0
2016-09-22T23:25:46.437Z
Let me preface this with "i've never used the plugin before", but what happens when you do `entry.myMapFieldHandle` from a front-end template?
Brad Bell
CC BY-SA 3.0
2016-09-23T10:13:37.603Z
it returns a MapModel object which contains information about the field (like Lat, Lng, etc in this case). But it does not expose any methods to get the field html though.
Prashanth
<plugin-development><plugins>
SimpleMap plugin - How to render it on a webpage?
# SimpleMap plugin - How to render it on a webpage?

(Asked by: username_0 on 2016-09-22)

This question is coming from a complete noob, so pls bear with me.

I am using [SimpleMap plugin](https://github.com/ethercreative/simplemap) 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?

**Tags:** plugin-development, plugins

> **Comments:**
> **username_1**: Let me preface this with "i've never used the plugin before", but what happens when you do `entry.myMapFieldHandle` from a front-end template?  
> **username_0**: it returns a MapModel object which contains information about the field (like Lat, Lng, etc in this case). But it does not expose any methods to get the field html though.  

---

## 1 answers

### Answer by username_2 on 2016-09-26. Score: 3 | Accepted answer

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:




And Mapbox:

> **Comments:**
> **username_3**: Paul: per Stack, it's recommended to add some sample code to your answer to better answer the question and in case that link goes away.  
> **username_2**: Done. I just didn't want anyone thinking it was my code or the author thinking I had stolen it.  

---

