├── CHANGELOG
├── GoogleMaps
    ├── GoogleMapsTags.php
    ├── meta.yaml
    ├── resources
    │   ├── lang
    │   │   └── en
    │   │   │   └── settings.php
    │   └── views
    │   │   └── partials
    │   │       └── map.blade.php
    └── settings.yaml
└── README.md


/CHANGELOG:
--------------------------------------------------------------------------------
1 | 1.1.0 (2017-03-06)
2 | - Rewrote the entire JavaScript into a class
3 | - Add support for multiple maps
4 | - Add the ability to specify multiple markers on the map
5 | 
6 | 1.0.0 (2016-07-29)
7 | - Initial release


--------------------------------------------------------------------------------
/GoogleMaps/GoogleMapsTags.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Statamic\Addons\GoogleMaps;
 4 | 
 5 | use Statamic\Extend\Tags;
 6 | use Illuminate\Support\Facades\Log;
 7 | 
 8 | class GoogleMapsTags extends Tags
 9 | {
10 |     /**
11 |      * The {{ google_maps }} tag
12 |      *
13 |      * @return string
14 |      */
15 |     public function index()
16 |     {
17 |         $api_key = $this->getConfig('api_key', 'YOUR_API_KEY');
18 |         $zoom = $this->getParamInt('zoom', 10);
19 |         $address = $this->getParam('address', 'New York');
20 |         $height = $this->getParam('height', '300px');
21 |         $width = $this->getParam('width', 'auto');
22 |         $markers = array_filter(
23 |             explode(';', $this->getParam('markers'))
24 |         );
25 | 
26 |         $map_id = 'gmap' . uniqid();
27 | 
28 |         if ($api_key == 'YOUR_API_KEY') {
29 |             Log::error("GoogleMapsAddon: No api key specified");
30 |         }
31 | 
32 |         return $this->view('partials.map', compact('api_key', 'zoom', 'address', 'height', 'width', 'map_id', 'markers'));
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/GoogleMaps/meta.yaml:
--------------------------------------------------------------------------------
1 | name: Google Maps
2 | version: 1.1.0
3 | description: Easily integrate google maps into your website
4 | url: https://github.com/krve/statamic-google-maps
5 | developer: Kristoffer Vestergaard
6 | developer_url: https://krve.io
7 | 


--------------------------------------------------------------------------------
/GoogleMaps/resources/lang/en/settings.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | return [
4 |     'api_key' => 'API Key',
5 |     'api_key_instruct' => 'Enter your Google Maps JavaScript API key'
6 | ];
7 | 


--------------------------------------------------------------------------------
/GoogleMaps/resources/views/partials/map.blade.php:
--------------------------------------------------------------------------------
  1 | <div id="{{ $map_id }}" style="height:{{ $height }};width:{{ $width }};"></div>
  2 | <script>
  3 |     if (typeof GoogleMap === 'undefined') {
  4 |         var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  5 | 
  6 |         function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  7 | 
  8 |         window.GoogleMap = function () {
  9 |             function GoogleMap(id, options) {
 10 |                 _classCallCheck(this, GoogleMap);
 11 | 
 12 |                 this.id = id;
 13 |                 this.options = options || {};
 14 |                 this.markers = options.markers || [];
 15 |                 this.isCentered = false;
 16 | 
 17 |                 this.init();
 18 | 
 19 |                 for(var i = 0; i < this.markers.length; i++) {
 20 |                     this.geocodeAddress(this.markers[i], function (location) {
 21 |                         this.addMarker(location);
 22 |                     }.bind(this));
 23 |                 }
 24 |             }
 25 | 
 26 |             _createClass(GoogleMap, [{
 27 |                 key: 'init',
 28 |                 value: function init() {
 29 |                     this.element = document.getElementById(this.id);
 30 | 
 31 |                     if (typeof this.element === 'undefined') {
 32 |                         throw new Error('The element does not exist [#' + this.id + ']');
 33 |                     }
 34 | 
 35 |                     this.map = new google.maps.Map(this.element, {
 36 |                         zoom: this.options.zoom,
 37 |                         center: { lat: -34.397, lng: 150.644 }
 38 |                     });
 39 | 
 40 |                     if (typeof this.options.address !== 'undefined') {
 41 |                         this.geocodeAddress(this.options.address, function (location) {
 42 |                             if (this.isCentered == false) {
 43 |                                 this.map.setCenter(location);
 44 |                                 this.isCentered = true;
 45 |                             }
 46 | 
 47 |                             if (this.markers.length <= 0) {
 48 |                                 this.addMarker(location);
 49 |                             }
 50 |                         }.bind(this));
 51 |                     }
 52 |                 }
 53 |             }, {
 54 |                 key: 'geocodeAddress',
 55 |                 value: function geocodeAddress(address, callback) {
 56 |                     var geocoder = new google.maps.Geocoder();
 57 | 
 58 |                     geocoder.geocode({ address: address }, function (results, status) {
 59 |                         if (status === 'OK') {
 60 |                             callback(results[0].geometry.location);
 61 |                         } else {
 62 |                             throw new Error('Geocode was not successful for the following reason: ' + status);
 63 |                         }
 64 |                     }.bind(this));
 65 |                 }
 66 |             }, {
 67 |                 key: 'addMarker',
 68 |                 value: function addMarker(location) {
 69 |                     this.markers.push(new google.maps.Marker({
 70 |                         map: this.map,
 71 |                         position: location
 72 |                     }));
 73 |                 }
 74 |             }]);
 75 | 
 76 |             return GoogleMap;
 77 |         }();
 78 | 
 79 |         var script = document.createElement('script');
 80 |         script.src = "https://maps.googleapis.com/maps/api/js?key={{ $api_key }}&callback=GoogleMapInitialize";
 81 |         document.getElementsByTagName('head')[0].appendChild(script);
 82 |         googleMapsAdded = true;
 83 |     }
 84 | 
 85 |     if (typeof window.googleMaps === 'undefined') {
 86 |         window.googleMaps = [];
 87 |     }
 88 | 
 89 |     window.googleMaps.push({
 90 |         id: "{{ $map_id }}",
 91 |         zoom: {{ $zoom}},
 92 |         address: "{{ $address }}",
 93 |         @if (count($markers) > 0)
 94 |             markers: ["{!! implode('", "', $markers) !!}"]
 95 |         @endif
 96 |     });
 97 | 
 98 |     function GoogleMapInitialize() {
 99 |         for(var i = 0; i < window.googleMaps.length; i++) {
100 |             new GoogleMap(window.googleMaps[i].id, {
101 |                 zoom: window.googleMaps[i].zoom,
102 |                 address: window.googleMaps[i].address,
103 |                 markers: window.googleMaps[i].markers || [],
104 |             });
105 |         }
106 |     }
107 | </script>


--------------------------------------------------------------------------------
/GoogleMaps/settings.yaml:
--------------------------------------------------------------------------------
1 | fields:
2 |   api_key:
3 |     type: text
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Installation
 2 | 
 3 | Clone or download the repository and move the "GoogleMaps" folder into your `site/addons` folder.
 4 | 
 5 | 
 6 | ### Setup
 7 | 
 8 | Add your Google Maps JS API Key to the settings page `../cp/addons/google-maps/settings`
 9 | 
10 | 
11 | ### Usage
12 | 
13 | You can now use google maps like so:
14 | 
15 | ```
16 | {{ google_maps address="1600 Amphitheatre Parkway" height="400px" }}
17 | ```
18 | 
19 | ### Options
20 | 
21 | The following options are available
22 | 
23 | - address
24 | - height
25 | - width
26 | - zoom (The level of zoom)
27 | - markers
28 | 
29 | #### Adding your own markers
30 | You can add your own markers to the map using the following syntax
31 | ```
32 | {{ google_maps address="1600 Amphitheatre Parkway" height="400px" markers="Example Address 1;Example Address 2" }}
33 | ```
34 | The `;` represents a split. Use this if you have multiple markers.
35 | 
36 | ### Getting an API key
37 | You can find Google's own guide for getting an API key here: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key)
38 | 
39 | 
40 | ### Contribution
41 | 
42 | Feel free to submit pull requests if you have any ideas on how to improve the addon.
43 | 
44 | 


--------------------------------------------------------------------------------