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):
JavaScript example
As GoogleMapsPlugin is based on
gmap3, using its JavaScript API isn't that hard either
while opening up a few more possibilities.
Error: no such plugin googlemaps
%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"}%
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
Name | Version | Description |
---|
JSON | >=2.51 | Required |
Foswiki::Plugins::JQueryPlugin | >=4.10 | Required |
Change History
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 |