TIP GoogleMapsPlugin is not installed on Foswiki.org.

GoogleMapsPlugin

Google Maps for Foswiki

Examples

TML example

You type:

%GOOGLEMAPS{
  width="600px"
  address="Nebraska"
  zoom="4" 
  markeraddress="Hanford
    Oak Ridge=
    Stagg Field Chicago=Stagg Field Chicago Uni,The location of the the Pile-1 first reaction.,There is not much left here.
    Bradbury Science Museum, Los Alamos=
    White Sands Missile Range=White Sands Missile Range,The location of the Trinity test"
  id="ManhattanProject"
}%

%STARTSECTION{"example1"}%
%GOOGLEMAPS{
  width="600px"
  address="Nebraska"
  zoom="4" 
  markeraddress="Hanford
    Oak Ridge=
    Stagg Field Chicago=Stagg Field Chicago Uni,The location of the the Pile-1 first reaction.,There is not much left here.
    Bradbury Science Museum, Los Alamos=
    White Sands Missile Range=White Sands Missile Range,The location of the Trinity test"
}%
%ENDSECTION{"example1"}%

You get (if installed):

TheManhattanProject.jpg

JavaScript example

As GoogleMapsPlugin is based on gmap3, using its JavaScript API isn't that hard either while opening up a few more possibilities.

<img src=

%STARTSECTION{"example2"}%
<div id="example2" style="height:350px;width:600px"></div>

<div class="foswikiPageForm">
<table class="foswikiLayoutTable" style="width:600px">
<tr>
  <th>Address:</th>
  <td><input type="text" class="foswikiInputField" size="50" id="address" /> <a href="#" id="searchAddress">%JQICON{"find"}%</a></td>
</tr>
<tr>
  <th>Lat:</th>
  <td><input type="text" class="foswikiInputField" size="50" id="lat" /></td>
</tr>
<tr>
  <th>Long:</th>
  <td><input type="text" class="foswikiInputField" size="50" id="lng" /></td>
</tr>
<tr>
  <th>Zoom:</th>
  <td><input type="text" class="foswikiInputField" size="50" id="zoom" /></td>
</tr>
</table>
</div>
%JQREQUIRE{"googlemaps"}%%ADDTOZONE{"script" id="MYGOOGLEMAPS::JS" requires="JQUERYPLUGIN::GOOGLEMAPS" text="<script type='text/javascript' src='%ATTACHURLPATH%/script.js'></script>"}%
%ENDSECTION{"example2"}%

%STARTATTACH{"script.js" hidecontent="on"}% "use strict"; (function($) {

$('#example2').livequery(function() { var $this = $(this);

function init() { $this.gmap3({
marker
{
address
"London" }, map:{ options:{
zoom
15, },
events
{ bounds_changed: function(map) { var center = map.getCenter(); $("#lat").val(center.lat()); $("#lng").val(center.lng()); $("#zoom").val(map.getZoom()); $this.gmap3({ getaddress: { latLng:center, callback:function(results){ var address = results && results[0] ? results[0].formatted_address : "no address"; $("#address").val(address); } } }); } } } }); }

if (window.googleApiLoaded) { $(window).on("googleApiLoaded", function() { init(); }); } else { init(); }

function updateMap() { $this.gmap3({
clear
{},
getlatlng
{
address
$("#address").val(),
callback
function(results) { if (results) { var pos = results[0].geometry.location; $this.gmap3({
map
{
options
{
center
pos,
zoom
parseInt($("#zoom").val(),10) } },
marker
{
latLng
pos } }); } } } }); }

$("#searchAddress").click(function() { updateMap(); return false; });

$("#address, #zoom").keydown(function(ev) { if (ev.keyCode == 13) { updateMap(); return false; } });

$("#lat, #lng").keydown(function(ev) { if (ev.keyCode == 13) { var lat = parseFloat($("#lat").val()), lng = parseFloat($("#lng").val()); $this.gmap3({
map
{
options
{
center
[lat, lng] } },
latLng
{
position
[lat, lng] } }); } }); });
})(jQuery); %ENDATTACH%

Syntax

%GOOGLEMAPS{...}%

Parameter Description Default
height="..." integer zoom factor 350px
width="..." integer zoom factor  
zoom="..." integer zoom factor 1
markeraddress="..." addresses of markers to be displayed on the map; addresses are separated by newlines
See examples below.
 
infowindow="..." content of the info window to be displayed at the marker, or at the infowindowaddress  
use either address or center.
address="..." free form address to center the map on  
center="..." comma-separated latitude and longitude position to center the map on, e.g. 53, 9  
use either infowindowaddress or infowindowposition.
infowindowaddress="..." position where to put the infowindow  
infowindowposition="..." coma-separated latitude and longitude position of the infowindow  
type="..." map type, can be roadmap, satellite, hybrid or terrain roadmap
typecontrol="on,off" boolean flag whether to display the type control widget on
navigationcontrol="on,off" boolean flag whether to display the navigation control on
streetviewcontrol="on,off" boolean flag whether to display the streetview control on
scrollwheel="on,off" boolean flag whether to enable/disable zooming using the scroll wheel on
id="..." the html id of the container holding the map, defaults to a random id gmap3<random>

Details for the markeraddress

markeraddress accepts three different formats:

Format Example Result
A location Hanford TheHanfordSite.jpg
A location followed by an equal sign (=) Oak Ridge= TheOakRidgeSite.jpg
A location and a description, separated by an equal sign White Sands Missile Range=White Sands Missile Range,The location of the Trinity test.

Note: the comma introduces a new line.

TheTrinityTestSite.jpg

Further reading

See

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

If you are using SecurityHeadersPlugin then you need to allow a few google resources to be loaded by Foswiki:

  • add *.googleapis.com to script-src
  • add fonts.googleapis.com to style-src
  • add fonts.gstatic.com to font-src

Dependencies

NameVersionDescription
JSON>=2.51Required
Foswiki::Plugins::JQueryPlugin>=4.10Required

Change History

25 Sep 2017: fixed sending the API key to google
02 Sep 2016: repackaged to contain a missing js file in the examples
21 Apr 2016: upgraded to latest version of gmap3
07 Nov 2013: fixed issue mixing HTTP and HTTPS assets
06 May 2013: implement multiple markers, all having a click event to open an infowindow
08 Feb 2013: initial release

PackageForm edit

Author Michael Daum
Version 3.11
Release 25 Sep 2017
Description Google Maps for Foswiki
Copyright © 2013-2017 Michael Daum http://michaeldaumconsulting.com (Foswiki integration), © 2010-2012 Jean-Baptiste Demonte (gmap3)
License GPL (Gnu General Public License)
Home Foswiki:Extensions/GoogleMapsPlugin
Support Foswiki:Support/GoogleMapsPlugin
Repository https://github.com/foswiki/GoogleMapsPlugin
ExtensionClassification Interface and Visualisation
ExtensionType PluginPackage
Compatibility
ImageUrl GoogleMapsSnap1.png
DemoUrl http://www.michaeldaumconsulting.com/Home/Contact
SupportUrl GoogleMapsPlugin
ModificationPolicy CoordinateWithAuthor
Topic attachments
I Attachment Action Size Date Who Comment
GoogleMapsPlugin.md5md5 GoogleMapsPlugin.md5 manage 171 bytes 25 Sep 2017 - 11:36 MichaelDaum  
GoogleMapsPlugin.sha1sha1 GoogleMapsPlugin.sha1 manage 195 bytes 25 Sep 2017 - 11:36 MichaelDaum  
GoogleMapsPlugin.tgztgz GoogleMapsPlugin.tgz manage 432 K 25 Sep 2017 - 11:36 MichaelDaum  
GoogleMapsPlugin.zipzip GoogleMapsPlugin.zip manage 436 K 25 Sep 2017 - 11:35 MichaelDaum  
GoogleMapsPlugin_installerEXT GoogleMapsPlugin_installer manage 5 K 25 Sep 2017 - 11:36 MichaelDaum  
GoogleMapsSnap1.pngpng GoogleMapsSnap1.png manage 264 K 25 Sep 2017 - 11:34 MichaelDaum  
JavaScriptExample.jpgjpg JavaScriptExample.jpg manage 45 K 25 Sep 2017 - 11:35 MichaelDaum JavaScript example
TheHanfordSite.jpgjpg TheHanfordSite.jpg manage 11 K 25 Sep 2017 - 11:35 MichaelDaum The Hanford site
TheManhattanProject.jpgjpg TheManhattanProject.jpg manage 53 K 25 Sep 2017 - 11:35 MichaelDaum The Manhattan project map
TheOakRidgeSite.jpgjpg TheOakRidgeSite.jpg manage 18 K 25 Sep 2017 - 11:35 MichaelDaum The Oak Ridge site
TheTrinityTestSite.jpgjpg TheTrinityTestSite.jpg manage 16 K 25 Sep 2017 - 11:35 MichaelDaum The Trinity test site
script.jsjs script.js manage 2 K 25 Sep 2017 - 11:34 MichaelDaum Generated by AttachContentPlugin
Topic revision: r7 - 25 Sep 2017, MichaelDaum - This page was cached on 25 Sep 2017 - 13:41.

The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License