1

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?

| improve this question | | | | |
  • 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 Sep 22 '16 at 23:25
  • 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 Sep 23 '16 at 10:13
3

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:

<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>
| improve this answer | | | | |
  • 1
    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 Sep 26 '16 at 21:34
  • Done. I just didn't want anyone thinking it was my code or the author thinking I had stolen it. – Paul Frost Sep 27 '16 at 8:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.