googlemaps3 Plugin

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

There are a number of different maps and google maps plugins available, all of which are outdated or limited in their usage, so I wrote a new one which can easily be extended should you miss a feature. This was originally based on Christopher Smith's googlemaps plugin, but with a complete overhaul, additional features, and changes in syntax.

You need to have a Google Maps API key to use this plugin (see Configuration and Settings)

• Place one or more google maps on a wiki page
• Set markers on the page with customized icon and popup
• Select text, image, and directions link to show in marker popup
• Choose language of google maps user interface
• Customize the controls visible on the map
• Maps and markers can be defined by latitude/longitude coordinates or address
• Alternatively display a map with KML or GeoRSS Layers

See the plugin in action here, created with the following syntax:

<googlemaps3 address="hua hin beach" zoom="9">
address,hua hin beach,Hua Hin Beach,beach.png,Hua Hin Beach with Hilton Hotel,Directions,_media/google:hua_hin_beach.jpg
</googlemaps3>

The same can be achieved with:

<googlemaps3 lat="12.57076" lng="99.96260" zoom="9">
12.57076,99.96260,Hua Hin Beach,beach.png,Hua Hin Beach with Hilton Hotel,Directions,_media/google:hua_hin_beach.jpg
</googlemaps3>

<googlemaps3 lat="12.57076" lng="99.96260" zoom="9" [option="setting"]>
[marker1]
[marker2]
[...]
[markerN]
</googlemaps3>

1. Default set in syntax.php where no default is set in API
2. Default set in syntax.php corresponding to API default
3. Map will pan to location address if given and exist after having been centered to lat/lng coordinates
4. Default for all maps set in Plugin Configuration, can be overridden for each wiki page (must be set for first map on the page, and cannot be changed for other maps on the same page)
5. Available map types: roadmap, hybrid, satellite, terrain
6. Region Bias where google maps leans towards (example: location address of 'Freiburg' will center the map in Freiburg/Germany if region is set to US or DE, but will center to Freiburg/Switzerland if region is set to CH)
7. URL to kml file which includes markers or overlays

1. Map Option identifiers are case-sensitive
2. coordinates and initial zoom factor are mandatory (but can be taken from default), all other options are optional

lat, lng, title, icon, info, dir, img, width

1. Used to place the marker on the map. If lat is given as address, then lng is interpreted as address. See Examples/Usage above.
2. The title shows when hovering over the marker, and as first line in the popup window.
3. If icon is a
   • 'filename' with extension, then the folder path for custom marker icons is prepended and the selected custom marker is put on the map. Custom markers show on the map irrespective of the zoom level, where google maps standard markers only show on selected zoom levels.
   • 'identifier' without file extension, then it's interpreted as svg path which needs to be defined somewhere else on the page as javascript variable, for example as part of a library or template.
4. The text can include wiki markup.
5. This text shows in the marker popup and, when tapped or clicked, opens a new google map page with the marker location as destination
6. If specified, then the image from the provided URL will be included in the marker popup window between title and info text.
7. Default popup window width is specified in the plugin's style.css file, but can be overridden per marker here.

1. You can skip options which are not needed, but you need to keep sequence and position of options. To display a marker with standard icon and popup window, for example, you would define the marker like so:

   address,hua hin beach,Hua Hin Beach,,Hua Hin Beach with Hilton Hotel

2. The delimiter (default=',') can be configured in the plugin configuration.
3. You can place as many markers in a map as you wish, each marker must have its own line and be the only information on that line.
4. The googlemaps3 plugin ships with a number of custom png icons like beach.png used in Examples/Usage. I have included a simple php file which displays all icons in the package, and when hovering over an icon the icon file name is shown. Use the following URL after having installed the plugin (/lib/plugins/ must be accessible from the web):

   https://your.wiki.domain/lib/plugins/googlemaps3/icons/icons.php

• Log in to Google Cloud Platform
• Register an API Key and enable Maps JavaScript API in Enabled APIs
• If you want to use addresses instead of coordinates you also need to enable the Geocoding API

The following options set the plugin's behavior for your site unless overriden per map or page.

1. Access a marker icon with 'lib/plugins/googlemaps3/icons/beach.png' instead of 'beach.png' when the path Option is set to an empty string.
2. Change to a delimiter you do not need in any of your marker titles or popup strings.

Default plugin style sheet:

/* maps */
.googlemaps3 {
	width: 100%;
	height: 500px;
}
/* marker popup */
.googlemaps3.markerinfo {
	width: 200px;
	height: auto;
}

• You can add 'width' and 'height' options for each map.
• You can add 'width' option for each marker.
• You can add CSS styles for individual maps and markers on a page. Every map and marker on the page is numerated with an ID, #googlemaps3map1..N for maps and #googlemaps3marker1..N for markers. Example: on a page with 3 maps which each has 2 markers, the 2^nd Map's CSS and the 2^nd Marker's CSS of that map would be styled like this:

  #googlemaps3map2 {
  	height: 400px;
  }
  #googlemaps3marker4 {
  	width: 300px;
  }

• Initial release