Foswiki on GitHub is open for business! Next release meeting: Monday Dec. 1, 1300Z

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):

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"}%
<literal>
<script>
jQuery(function($) {
  $('#example2').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);
              }
            }
           });
        }
      }
    },
  });

  function updateMap() {
    $("#example2").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();
    }
  });
  $("#lat, #lng").keydown(function(ev) {
    if (ev.keyCode == 13) {
      var lat = parseFloat($("#lat").val()),
          lng = parseFloat($("#lng").val());
      $("#example2").gmap3({
        map: {
          options: {
            center: [lat, lng]
          }
        },
        latLng: {
          position: [lat, lng]
        }
      });
    }
  });
  
});
</script>
</literal>
%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.

Info

Author(s): Michael Daum
Copyright: © 2013 Michael Daum http://michaeldaumconsulting.com (Foswiki integration), © 2010-2012 Jean-Baptiste Demonte (gmap3)
License: GPL (Gnu General Public License)
Version: 2.01
Change History:  
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
Dependencies:
NameVersionDescription
JSON>=2.51Required
Foswiki::Plugins::JQueryPlugin>=4.10Required
Home page: Foswiki:Extensions/GoogleMapsPlugin
Support: Foswiki:Support/GoogleMapsPlugin

Topic revision: r3 - 07 Nov 2013, MichaelDaum
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License