Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-26T21:34:11.253Z
Answers.Text: 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.
Answers.UserDisplayName: RitterKnight
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-27T08:44:10.510Z
Answers.Text: Done. I just didn't want anyone thinking it was my code or the author thinking I had stolen it.
Answers.UserDisplayName: Paul Frost
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-26T20:18:30.037Z
Answers.LastActivityDate: 2016-09-27T08:42:35.843Z
Answers.LastEditDate: 2016-09-27T08:42:35.843Z
Answers.UserDisplayName: Paul Frost
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-22T23:25:46.437Z
Comments.Text: 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?
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-09-23T10:13:37.603Z
Comments.Text: 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.
Comments.UserDisplayName: Prashanth
Tags: <plugin-development><plugins>
Title: SimpleMap plugin - How to render it on a webpage?
ThreadText: # 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](https://github.com/ethercreative/simplemap/issues/11).
  
  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](https://github.com/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:
  
  ```
  <div id="map"></div>
  <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: {{ entry.myMapField.lat }},
          lng: {{ entry.myMapField.lng }}
        },
        zoom: 8
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  
  ```
  
  And Mapbox:
  
  ```
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
  
  <div id='map' style='width: 400px; height: 300px;'></div>
  <script>
    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 }}
      ]
    });
  </script>
  
  ```
  
  > **Comments:**
  > **username_3**: username_2: 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.  
  
  ---
  
  