TIP GoogleMapsPlugin is not installed on Foswiki.org.

GoogleMapsPlugin

Google Maps for Foswiki

Examples

TML example

You type:

%GOOGLEMAPS{
  height="350px" 
  width="600px"
  zoom="15" 
  address="Union Station, Los Angeles, USA" 
  infowindowaddress="Union Station, Los Angeles, USA"
  infowindow="<b>Here it is!</b>"
}%

%STARTSECTION{"example1"}%
%GOOGLEMAPS{
  height="350px" 
  width="600px"
  zoom="15" 
  address="Union Station, Los Angeles, USA" 
  infowindowaddress="Union Station, Los Angeles, USA"
  infowindow="<b>Here it is!</b>"
}%
%ENDSECTION{"example1"}%

You get (if installed):

GoogleMapsSnap1.png

JavaScript example

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

%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{...}%

  • 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 address or center);
  • zoom: integer zoom factor
  • markeraddress: addresses of markers to be displayed on the map; addresses are separated by newlines
  • infowindow: content of the info window to be displayed at the marker, or at the infowindowaddress
  • infowindowaddress: position where to put the infowindow
  • infowindowposition: coma-separated latitude and longitude position of the infowindow (use either infowindowaddress or infowindowposition);
  • type: map type, can be roadmap, sattelite, hybrid or terrain
  • typecontrol: boolean flag whether to display the type control widget
  • navigationcontrol: boolean flag whether to display the navigation control
  • streetviewcontrol: boolean flag whether to display the streetview control
  • scrollwheel: boolean flag whether to enable/disable zooming using the scroll wheel
  • height: height of the map (required)
  • width: width of the map, defaults to 100% expanding to the size of the container
  • id: the html id of the container holding the map, defaults to a random id

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. Use "Find More Extensions" to get a list of available extensions. Select "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 http://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

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.00
Release 11 Jul 2016
Description Google Maps for Foswiki
Copyright © 2013-2016 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 11 Jul 2016 - 12:57 MichaelDaum  
GoogleMapsPlugin.sha1sha1 GoogleMapsPlugin.sha1 manage 195 bytes 11 Jul 2016 - 12:57 MichaelDaum  
GoogleMapsPlugin.tgztgz GoogleMapsPlugin.tgz manage 322 K 11 Jul 2016 - 12:56 MichaelDaum  
GoogleMapsPlugin.zipzip GoogleMapsPlugin.zip manage 325 K 11 Jul 2016 - 12:56 MichaelDaum  
GoogleMapsPlugin_installerEXT GoogleMapsPlugin_installer manage 5 K 11 Jul 2016 - 12:56 MichaelDaum  
GoogleMapsSnap1.pngpng GoogleMapsSnap1.png manage 264 K 11 Jul 2016 - 12:55 MichaelDaum  
script.jsjs script.js manage 2 K 11 Jul 2016 - 12:55 MichaelDaum Generated by AttachContentPlugin
Topic revision: r4 - 11 Jul 2016, MichaelDaum - This page was cached on 26 Jul 2016 - 08:32.

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