Google Maps plugin

This plugin allows any number of google maps to be added to a wiki page.

Requirements

Wiki Installation

Client Web browser

  • A javascript enabled web browser with XMLHTTP (Ajax) capability. If you can view googlemaps normally, you will be able to view them in the wiki.

Syntax

<gmap>parameter=value|parameter=value| ... </gmap>

Parameters

  • width — 999px (e.g. 500px) width of the google map, default is 400px.
  • height — 999px (e.g. 500px) height of the google map, default is 300px.
  • type — values: map | satellite | hybrid. default map.
  • lat — values: -90.0 - 90.0; latitude of map centre, negative values are south.
  • lon — values: -180.0 - 180.0; longtitude of map centre, negative values are west.
  • zoom — integer, zoom level, default value 8. Valid values depend on the map and location.
  • controls — values on | off. default on. Whether or not to show controls for zooming and panning on the map.

The parameters can be in any order.

See the page in action here

Installation

Plugin sources: zip format (4k), tar.gz format (2k), darcs repository

If your wiki uses either the plugin manager or the darcs plugin you can use them with the links above to install the plugin.

To install the plugin manually, download the source to your plugin folder, lib/plugins and extract its contents. That will create a new plugin folder, lib/plugins/googlemaps, and install the plugin.

The folder will contain:

script.js                              javascript to interface with google maps
style.css                              styles for the map containing element
syntax.php                             plugin script

The plugin is now installed.

Configuration

The plugin has two configuration constants:

  • GMAP_KEY — Your Google Maps API Key. To access Google Maps data you need a key. That key is unique to the url (domain + path/to/folder) used for the page which accesses Google Maps. You can get your key from the Google Map API Key Signup page.
  • GMAP_SCRIPT — The location of the google maps javascript. This will only need to be changed if google change the name, location or query string for accessing the script.

Details

The plugin consists of three files, the plugin php script syntax.php, javascript to interface with google maps in [#script.css] and default styles for the map containing element in style.css

syntax.php

<?php
/**
 * Plugin Google Maps: Allow Display of a Google Map in a wiki page.
 * 
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Christopher Smith <chris@jalakai.co.uk>
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
 
// ---------- [ Settings ] -----------------------------------------
define('GMAP_KEY','your google api key');
define('GMAP_SCRIPT','http://maps.google.com/maps?file=api&amp;v=1&amp;key='.GMAP_KEY);
 
/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_googlemaps extends DokuWiki_Syntax_Plugin {
 
    var $dflt = array(
      'type' => 'map',
      'width' => '',
      'height' => '',
      'lat'  => -4.25,
      'lon' => 55.833,
      'zoom' => 8,
      'controls' => 'on'
    );
 
    function getInfo(){
      return array(
        'author' => 'Christopher Smith',
        'email'  => 'chris@jalakai.co.uk',
        'date'   => '2006-02-18',
        'name'   => 'Google Maps Plugin',
        'desc'   => 'Remove one level of indenting
                     Syntax: <gmap>options</gmap>',
        'url'    => 'http://wiki.splitbrain.org/plugin:googlemaps',
      );
    }
 
    function getType() { return 'substition'; }
    function getSort() { return 900; } 
 
    function connectTo($mode) { 
        $this->Lexer->addSpecialPattern('<gmap>.*?</gmap>',$mode,'plugin_googlemaps'); 
    }
 
    function handle($match, $state, $pos, &$handler){
 
      // parse match for instructions, break into key value pairs
      $param = explode('|', substr($match, 6, -7));
 
      $gmap = $this->dflt;
      foreach($param as $kvpair) {
        list($key,$val) = explode('=',$kvpair);
        $key = strtolower($key);
        if (isset($gmap[$key])) $gmap[$key] = strtolower($val);        
      }
 
      if ($gmap['width'] || $gmap['height']) {
        $style = $gmap['width'] ? 'width: '.$gmap['width'].";" : "";
        $style .= $gmap['height'] ? 'height: '.$gmap['height'].";" : "";
        $style = "style='$style'";
      } else {
        $style = '';
      }      
 
      unset($gmap['width'],$gmap['height']);
 
      $param = '';
      foreach ($gmap as $key => $val) {
          $param .= is_numeric($val) ? "$key : $val," : "$key : '".hsc($val)."',";
      }      
      $param = "googlemap[googlemap.length] = { $param }";
 
      return array($style, $param);
    }
 
    function render($mode, &$renderer, $data) {
 
      static $initialised = false;    // set to true after script initialisation
 
      list($style, $param) = $data;
 
      $script = '';
 
      if (!$initialised) {
        $initialised = true;
        $script = '<script type="text/javascript" src="'.GMAP_SCRIPT.'"></script>';
      }
 
      $renderer->doc .= "
<div class='googlemap' $style>
$script
<script type='text/javascript'>
$param
</script>
</div>";
      return false;
    } 
}

script.js

/*
 *  Javascript associated with googlemaps plugin
 */
 
var maptypes = { map : 'G_MAP_TYPE', hybrid : 'G_HYBRID_TYPE', satellite : 'G_SATELLITE_TYPE' }
 
function in_array(needle, haystack) {
  for (var i=0 i<haystack.length i++)
    if (haystack[i] == needle) return true
 
  return false
}
 
function init_googlemaps() {
 
  // nothing to do?
  if (googlemap.length == 0) return
 
  // retrieve all google map containers
  var nodes = document.body.getElementsByTagName('div')
 
  var i=0
  for (var j=0 j<nodes.length j++) {
    if (nodes[j].className.match(/\bgooglemap\b/)) {
      googlemap[i++].node = nodes[j]
    }
  }
 
  // iterate through all the map containers and set up each map
  for (i=0 i<googlemap.length i++) {
    googlemap[i].map = new GMap(googlemap[i].node)
 
    with (googlemap[i]) {
      if (controls == 'on') {
        map.addControl(new GSmallMapControl())
        map.addControl(new GMapTypeControl())
      }
      map.centerAndZoom(new GPoint(lon, lat), zoom)  
 
      var supported = map.getMapTypes()
      var requested = maptypes[type]
 
      map.setMapType(in_array(requested,supported) ? requested : supported[0])
    }
  }
}
 
 
var googlemap = new Array()
addInitEvent(init_googlemaps)

style.css

These may be modified to suit your own requirements.

/* plugin: googlemaps */
.googlemap {
  width: 400px;
  height: 300px;
  border: 1px solid #333;
}
/* end plugin: googlemaps */

Revision History

  • 2006-02-18 — Initial release

To Do

  • add support for overlays, parsing of data for overlay points and info windows.

Bugs

Discussion

 
tutorials/googlemaps.txt · Last modified: 2006/02/18 20:54 (external edit)
 
Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki