KirbyText Extension - GMaps

This is a Kirbytag to integrate Google Maps API in your website

Requirements

• Plugin: Webhelper
• jQuery
• Google Maps Javascript API

Installation

First you need to install the plugin. In the second part copy the gmaps.js in to your assets/js directory and append this javascript file and the Google Maps Javascript API.

...
<script src="https://github.com/fanningert/kirbycms-extension-gmaps/raw/master//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://github.com/fanningert/kirbycms-extension-gmaps/raw/master/<?php echo at\fanninger\kirby\extension\gmaps\GMaps::getGoogleMapsJSApiUrl(); ?>"></script>
<?php echo js('assets/js/gmaps.js'); ?>
...

KirbyCli

kirby plugin:install fanningert/kirbycms-extension-gmaps

GIT

Go into the {{kirby folder}}/site/plugins directory and execute following command.

$ git clone https://github.com/fanningert/kirbycms-extension-webhelper.git
$ git clone https://github.com/fanningert/kirbycms-extension-gmaps.git

GIT submodule

Go in the root directory of your git repository and execute following command to add the repository as submodule to your GIT repository.

$ git submodule add https://github.com/fanningert/kirbycms-extension-webhelper.git ./site/plugins/kirbycms-extension-webhelper
$ git submodule add https://github.com/fanningert/kirbycms-extension-gmaps.git ./site/plugins/kirbycms-extension-gmaps
$ git submodule update --init --recursive
$ git submodule foreach --recursive git pull

Manuell

1. Click here to download the latest version of the WebHelper extension. Unzip it and rename the folder kirbycms-extension-webhelper.
2. Click here to download the latest version of the GMaps extension. Unzip it and rename the folder kirbycms-extension-gmaps.
3. Put both folders inside {{kirby folder}}/site/plugins
4. Move the file kirbycms-extension-gmaps/assets/js/gmaps.js to {{kirby}}/assets/js/gmaps.js. You should end up with a file structure like this:

{{kirby folder}}
  - assets
    - js
      - gmaps.js
  - site
    - plugins
      - kirbycms-extension-gmaps
        - kirbycms-extension-gmaps.php
      - kirbycms-extension-webhelper
        - kirbycms-extension-webhelper.php

Last of all, in the head section of your template, load jQuery, the GoogleMaps API and the gmaps.js script, like this:

<!-- loading jQuery from CDN -->
<script src="https://github.com/fanningert/kirbycms-extension-gmaps/raw/master//code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- loading the GoogleMaps API -->
<script src="https://github.com/fanningert/kirbycms-extension-gmaps/raw/master/<?php echo at\fanninger\kirby\extension\gmaps\GMaps::getGoogleMapsJSApiUrl(); ?>"></script>

<!-- loading the GMaps script -->
<?php echo js('assets/js/gmaps.js'); ?>

Update

KirbyCli

kirby plugin:update fanningert/kirbycms-extension-gmaps

GIT

Go into the {{kirby folder}}/site/plugins/kirbycms-extension-gmaps directory and execute following command.

$ git pull

Don't forget to update the requirement kirbycms-extension-webhelper.

GIT submodule

Go in the root directory of your git repository and execute following command to update the submodule of this extension.

$ git submodule foreach --recursive git pull

Asynchron Loading of jQuery and Google Maps Javascript API

For the asynchron loading of Javascript, you need a helper class. In my example I am using script.js.

...
  <?php echo js("assets/js/script.min.js") ?>
  <script type="text/javascript">
    $script.path('<?php echo $kirby->urls->index; ?>/assets/js/');
    $script(['//code.jquery.com/jquery-2.1.1.min.js', 'gmaps'], 'pagejs');
    $script.ready('pagejs', function() {
      // I add the protcol, because without the protocol the script is searching in the local directory
      $script('<?php echo at\fanninger\kirby\extension\gmaps\GMaps::getGoogleMapsJSApiUrl(); ?>', 'googlemaps');
    });
  </script>
  </body>
</html>

Set Google-API-Key

1. Open {{kirby folder}}/site/config/config.php
2. Add following line: c::set('kirby.extension.gmaps.apikey', '{{KEY}}');

Documentation

Kirby configuration values

KirbyTag attributes

Root element (googlemaps)

KML (kml)

Marker (marker)

Examples

Simple example

Kirby

(googlemaps lat: 35.7152128 lng: 139.7981552 zoom: 4)

PHP

use at\fanninger\kirby\extension\gmaps\GMaps;

$attr = array();
$attr[GMaps::JS_ATTR_LAT] = 35.7152128;
$attr[GMaps::JS_ATTR_LNG] = 139.7981552;
$attr[GMaps::JS_ATTR_ZOOM] = 4;
echo GMaps::getGMap($page, $attr);

When you use the use command in a function, you will get following error.

Parse error: syntax error, unexpected 'use' (T_USE)

Replace the top code with following lines.

$attr = array();
$attr[at\fanninger\kirby\extension\gmaps\GMaps::JS_ATTR_LAT] = 35.7152128;
$attr[at\fanninger\kirby\extension\gmaps\GMaps::JS_ATTR_LNG] = 139.7981552;
$attr[at\fanninger\kirby\extension\gmaps\GMaps::JS_ATTR_ZOOM] = 4;
echo at\fanninger\kirby\extension\gmaps\GMaps::getGMap($page, $attr);

Use Place API for map focus

Kirby

(googlemaps place: Vienna)

PHP

use at\fanninger\kirby\extension\gmaps\GMaps;

$attr = array();
$attr[GMaps::JS_ATTR_PLACE] = 'Vienna';
echo GMaps::getGMap($page, $attr);

KML

Kirby

(googlemaps)
  (kml file: cta.kml)
(/googlemaps)

PHP

use at\fanninger\kirby\extension\gmaps\GMaps;

$attr = array();
$attr[GMaps::JS_OBJECT_KML] = array();
$attr[GMaps::JS_OBJECT_KML][0] = array();
$attr[GMaps::JS_OBJECT_KML][0][GMaps::JS_ATTR_KML_FILE] = '.../cta.kml';
echo GMaps::getGMap($page, $attr);

Marker

Kirby

(googlemaps)
  (marker lat: 41.875696 lng: -87.624207)
  (marker lat: -87.624207 lng: 41.875696)
  (marker place: Vienna)
  (marker place: New York City)
    <a href="https://en.wikipedia.org/wiki/New_York_City">New York City</a>
  (/marker)
(/googlemaps)

PHP

use at\fanninger\kirby\extension\gmaps\GMaps;

$attr = array();
$attr[GMaps::JS_OBJECT_MARKER] = array();
$attr[GMaps::JS_OBJECT_MARKER][0] = array();
$attr[GMaps::JS_OBJECT_MARKER][0][GMaps::JS_ATTR_MARKER_LAT] = 41.875696;
$attr[GMaps::JS_OBJECT_MARKER][0][GMaps::JS_ATTR_MARKER_LNG] = -87.624207;
$attr[GMaps::JS_OBJECT_MARKER][1] = array();
$attr[GMaps::JS_OBJECT_MARKER][1][GMaps::JS_ATTR_MARKER_LAT] = -87.624207;
$attr[GMaps::JS_OBJECT_MARKER][1][GMaps::JS_ATTR_MARKER_LNG] = 41.875696;
$attr[GMaps::JS_OBJECT_MARKER][2] = array();
$attr[GMaps::JS_OBJECT_MARKER][2][GMaps::JS_ATTR_MARKER_PLACE] = "Vienna";
$attr[GMaps::JS_OBJECT_MARKER][3] = array();
$attr[GMaps::JS_OBJECT_MARKER][3][GMaps::JS_ATTR_MARKER_PLACE] = "New York City";
$attr[GMaps::JS_OBJECT_MARKER][3][GMaps::JS_ATTR_MARKER_CONTENT] = '<a href="https://en.wikipedia.org/wiki/New_York_City">New York City</a>';
echo GMaps::getGMap($page, $attr);