Google Maps - JavaScript API#
The Google Maps component is used to show a map using the Google Maps API.
Example#
The component can be included directly as follows:
1 2 3 4 5 |
|
Alternatively, the component can be included via a template that uses the API key from the configuration and also handles the user content:
1 |
|
Parameters#
id
#
ID of the map instance.
api-key
#
Google Maps API key.
zoom
#
Defaults to 13
.
Default zoom factor of the map.
lat
#
Defaults to 0
.
Latitude of the default map position.
lng
#
Defaults to 0
.
Longitude of the default map position.
access-user-location
#
If set, the map will try to center based on the user's current position.
Map-related Functions#
addMarker
#
Adds a marker to the map.
Example#
1 2 3 4 5 |
|
Parameters#
element
#
<woltlab-core-google-maps>
element.
latitude
#
Marker position (latitude)
longitude
#
Marker position (longitude)
title
#
Title of the marker.
focus
#
Defaults to false
.
True, to focus the map on the position of the marker.
addDraggableMarker
#
Adds a draggable marker to the map.
Example#
1 2 3 4 5 |
|
Parameters#
element
#
<woltlab-core-google-maps>
element.
latitude
#
Marker position (latitude)
longitude
#
Marker position (longitude)
Geocoding
#
Enables the geocoding feature for a map.
Example#
1 2 3 4 5 6 |
|
Parameters#
data-google-maps-geocoding
#
ID of the <woltlab-core-google-maps>
element.
data-google-maps-marker
#
If set, a movable marker is created that is coupled with the input field.
data-google-maps-geocoding-store
#
If set, the coordinates (latitude and longitude) are stored comma-separated in a hidden input field. Optionally, a value can be passed that is used as a prefix for the name of the input field.
MarkerLoader
#
Handles a large map with many markers where markers are loaded via AJAX.
Example#
1 2 3 4 5 |
|
Parameters#
element
#
<woltlab-core-google-maps>
element.
actionClassName
#
Name of the PHP class that is called to retrieve the markers via AJAX.
additionalParameters
#
Additional parameters that are transmitted when querying the markers via AJAX.