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="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="<?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="//code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- loading the GoogleMaps API -->
<script src="<?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

Kirby option	Default	Values	Description
kirby.extension.gmaps.debug	false	true/false
kirby.extension.gmaps.class	'googlemaps'	{string}	Class of the canvas element
kirby.extension.gmaps.lat	0.0	{number}	Initial LAT-Value for map
kirby.extension.gmaps.lng	0.0	{number}	Initial LNG-Value for map
kirby.extension.gmaps.zoom	7	{number 0-19}	Default zoom level
kirby.extension.gmaps.apikey	null	{string}	API-Key
kirby.extension.gmaps.controls.scale	true	true/false	Activate/Deactivate scale control
kirby.extension.gmaps.controls.maptypes	'roadmap,satellite,hybrid,terrain'	{string}
kirby.extension.gmaps.controls.maptype_selectable	true	true/false
kirby.extension.gmaps.controls.maptype.default	'roadmap'	{string}
kirby.extension.gmaps.controls.draggable	true	true/false
kirby.extension.gmaps.controls.zoomable	true	true/false
kirby.extension.gmaps.controls.streetview	true	true/false
kirby.extension.gmaps.controls.fitbounds.marker	true	true/false
kirby.extension.gmaps.controls.fitbounds.kml	true	true/false

KirbyTag attributes

Root element (googlemaps)

Option	Default	Values	Description
class			see kirby.extension.gmaps.class
lat			see kirby.extension.gmaps.lat
lng			see kirby.extension.gmaps.lng
place		{string}	alternative location definition over Place API
zoom			see kirby.extension.gmaps.zoom
scale			see kirby.extension.gmaps.controls.scale
dragable			see kirby.extension.gmaps.controls.draggable
zoomable			see kirby.extension.gmaps.controls.zoomable
maptypes			see kirby.extension.gmaps.controls.maptypes
maptype			see kirby.extension.gmaps.controls.maptype.default
maptype_selectable			see kirby.extension.gmaps.controls.maptype_selectable
streetview			see kirby.extension.gmaps.controls.streetview
fitbounds_marker			see kirby.extension.gmaps.controls.fitbounds.marker
fitbounds_kml			see kirby.extension.gmaps.controls.fitbounds.kml

KML (kml)

Option	Default	Values	Description
title		{string}	Title of KML, not useable at the moment
file		{string}	relative or absolute url

Marker (marker)

Option	Default	Values	Description
title		{string}
lat	0.0	{number}
lng	0.0	{number}
place		{string}	see place at the root element
{content}		{string}	Add the marker element you can add HTML-Content as element body. This content will be displayed as content of the popup when a user click on the 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);