Skip to content

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
<woltlab-core-google-maps
    id="id"
    class="googleMap"
    api-key="your_api_key"
></woltlab-core-google-maps>

Alternatively, the component can be included via a template that uses the API key from the configuration and also handles the user content:

1
{include file='googleMapsElement' googleMapsElementID="id"}

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.

addMarker#

Adds a marker to the map.

Example#

1
2
3
4
5
<script data-relocate="true">
    require(['WoltLabSuite/Core/Component/GoogleMaps/Marker'], ({ addMarker }) => {
        void addMarker(document.getElementById('map_id'), 52.4505, 13.7546, 'Title', true);
    });
</script>

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
<script data-relocate="true">
    require(['WoltLabSuite/Core/Component/GoogleMaps/Marker'], ({ addDraggableMarker }) => {
        void addDraggableMarker(document.getElementById('map_id'), 52.4505, 13.7546);
    });
</script>

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
<input
    type="text"
    data-google-maps-geocoding="map_id"
    data-google-maps-marker
    data-google-maps-geocoding-store="prefix"
>

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
<script data-relocate="true">
    require(['WoltLabSuite/Core/Component/GoogleMaps/MarkerLoader'], ({ setup }) => {
        setup(document.getElementById('map_id'), 'action_classname', {});
    });
</script>

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.

Last update: 2023-01-10