-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added several options to Twig/PHP
tag
method
- Loading branch information
1 parent
4d8e0d8
commit 4463d01
Showing
8 changed files
with
81 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,58 @@ | ||
# Clustering Markers | ||
|
||
To implement [marker clustering](https://developers.google.com/maps/documentation/javascript/marker-clustering), an additional JavaScript library is required. | ||
|
||
## Example | ||
|
||
Before any further explanation, here is the general snippet from which you can copy & paste to add marker clustering to your [dynamic map](/dynamic-maps/). It will likely require some minor adjustments for your site. | ||
|
||
```twig | ||
{# Load the marker clustering library #} | ||
{# 1. Load the marker clustering library #} | ||
{% js 'https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js' %} | ||
{# Create the JS callback function #} | ||
{# 2. Create the JS callback function #} | ||
{% js %} | ||
// Add marker clustering | ||
function addClustering() { | ||
// Get the map object | ||
var mapObject = googleMaps.getMap('my-map'); | ||
var myMap = googleMaps.getMap('my-map'); | ||
// Get map & markers | ||
var map = mapObject._map; | ||
var markers = Object.values(mapObject._markers); | ||
var map = myMap._map; | ||
var markers = Object.values(myMap._markers); | ||
// Cluster markers | ||
new MarkerClusterer(map, markers, { | ||
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' | ||
}); | ||
} | ||
{% endjs %} | ||
{# Specify callback function in map options #} | ||
{% set options = { | ||
id: 'my-map', | ||
callback: 'addClustering', | ||
{# 3. Get all locations to appear on the map #} | ||
{% set locations = craft.entries.section('locations').all() %} | ||
{# 4. Specify the map ID #} | ||
{% set mapOptions = { | ||
'id': 'my-map' | ||
} %} | ||
{# Get locations #} | ||
{% set locations = craft.entries.section('locations').all() %} | ||
{# 5. Specify the JS callback function #} | ||
{% set tagOptions = { | ||
'callback': 'addClustering' | ||
} %} | ||
{# Display the map #} | ||
{{ googleMaps.map(locations, options).tag() }} | ||
{# 6. Display the map #} | ||
{{ googleMaps.map(locations, mapOptions).tag(tagOptions) }} | ||
``` | ||
|
||
## Instructions | ||
|
||
1. First, you must **load the marker clustering library**. The example above points to a CDN, but you could alternatively store a local copy of the library. | ||
|
||
2. You then need to **create the JS callback function**. If desired, this function could be stored in a separate `.js` file. Be sure it gets loaded _after_ the plugin loads [the `googlemaps.js` file](/javascript/googlemaps.js/). | ||
2. You then need to **create the JS callback function**. If desired, this function could be stored in a separate `.js` file. Be sure it gets loaded _after_ the plugin loads the [`googlemaps.js` file](/javascript/googlemaps.js/). | ||
|
||
3. **Get the locations**, just as you normally would. It's very likely that you already have this part worked out. If not, check out the documentation for [creating a dynamic map...](/dynamic-maps/) | ||
|
||
4. **Specify the map's `id`** in the [`map` options](/dynamic-maps/map-management/#map-locations-options). This makes it easy to reference the map in JavaScript. | ||
|
||
3. **Specify the `callback` function in the map's [options](/models/dynamic-map-model/#construct-locations-options)**. If you are referencing a named function, simply pass the name of the function. It's also possible to pass an anonymous function (as a string). | ||
5. **Specify the `callback` function** in the [`tag` options](/dynamic-maps/twig-php-methods/#tag-options). If you are referencing a named function, specify the name of the function. Or you can pass an anonymous function (as a _string_ in Twig/PHP). | ||
|
||
4. Lastly, you'll want to **get the locations** and **display the map**. It's very likely that you already have this part worked out. If not, check out the documentation for [creating a dynamic map...](/dynamic-maps/) | ||
6. Lastly, **display the map** by providing the `locations`, `mapOptions`, and `tagOptions`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters