From eca6dfe12cea1b2c1a03938b1a3c2aed8551a1b7 Mon Sep 17 00:00:00 2001
From: Tam <hi@tam.sx>
Date: Thu, 6 Apr 2017 10:33:07 +0100
Subject: [PATCH] Updated README

---
 README.md | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 781be5a..3da3237 100644
--- a/README.md
+++ b/README.md
@@ -4,20 +4,31 @@
 A beautifully simple Google Map field type for Craft CMS. Full localization support, compatible with Matrix, supports 
 searching by location and sorting by distance.
 
+![How it looks](resources/preview.png)
+
 ## Installation
 Copy the `simplemap` folder into `craft/plugins`.
 
 ## Usage
 Create the field as you would any other.  
-The field type will return an array containing `lat`, `lng`, `zoom`, `address`, and `parts`. This means you can use `{{ myMapField.lat }}`.
+The field type will return an array containing the following:
+
+ - `lat` - The selected locations latitude
+ - `lng` - The selected locations longitude
+ - `zoom` - The zoom level of the map
+ - `address` - The address of the selected location
+ - `parts` - See below
+
+This means you can use `{{ myMapField.lat }}`.
 
 **`parts`**
 
 This contains the locations address, broken down into its constituent parts. All values are optional so you'll need to have checks on any you use to make sure they exist.  
 A list of the available values can be found [here](https://developers.google.com/maps/documentation/geocoding/intro#Types).  
-To access the short version of any part, append `_short` to the end of its name. E.g. `{{ myMapField.country_short }}`.
+To access the short version of any part, append `_short` to the end of its name.  
+e.g. `{{ myMapField.country_short }}`.
 
-**Searching and Sorting**
+### Searching and Sorting
 
 You can search for elements using the location specified in your map field. When searching by your map field you also have the option to sort the results by distance.
 
@@ -33,11 +44,52 @@ You can search for elements using the location specified in your map field. When
 - `radius`: The radius around the location to search. Defaults to `50`.
 - `unit`: The unit of measurement for the search. Can be either `km` (kilometers) or `mi` (miles). Defaults to `km`.
 
-**API Keys**
+### API Keys
 
 You can access your browser API key in templates using `craft.simpleMap.apiKey`.
 
-![How it looks](resources/preview.png)
+### Displaying a Map
+
+This plugin does **not** generate a front-end map; how you do that and what map library you use is up to you. However, since we have received a lot of questions asking how to do so, here are a couple of examples.
+  
+Using [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial):
+
+```twig
+<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: {{ entry.myMapField.zoom }}
+  });
+}
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?key={{ craft.simpleMap.apiKey }}&callback=initMap" async defer></script>
+```
+
+And [Mapbox](https://www.mapbox.com/mapbox-gl-js/api/):
+
+```twig
+<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 = "YOUR_API_KEY";
+var map = new mapboxgl.Map({
+  container: "map",
+  style: "mapbox://styles/mapbox/streets-v9",
+  center: [
+    {{ entry.myMapField.lng }},
+    {{ entry.myMapField.lat }}
+  ]
+});
+</script>
+```
 
 ## Changelog