Map Markers plugin for OctoberCMS to display multiple markers on Google map
This OctoberCMS plugin allows user to set up and display multiple markers on Google Map.
Aside coordinates, each marker can have a title, attached image and optional links to other content.
At the moment, links to blog posts from RainLab.Blog and albums from Graker.PhotoAlbums are supported.
Don’t forget to set Google API key on the plugin’s Settings page.
To use the plugin, install it as usual, go to graker/mapmarkers at Backend, create some markers and optionally link them to blog posts and photo albums.
Then add Map component to a page. The map will be displayed with all the markers you created.
For this component, you can set:
Attaching posts and albums to markers is totally optional. If you have no need for it, you still can create markers with a title, image and description.
After setting up a component, look at partials at components/map
in plugin directory.
As you can see, beside default.htm
(map container markup), there is popup.htm
partial.
It is used to render popups when markers on the map are being clicked. Override this partial’s markup for your needs.
This component can be used to display markers as plain content (like posts), for example, under the map.
For each marker you can display a title, image thumbnail, description and links to attached blog posts and photo albums.
You can change markers display order by clicking on Reorder markers button on Markers backend page.
If a marker has exactly one other model attached (either post or album), marker.singleUrl
value will be available both in Map and Markers List component partials. It will contain a string with url to this single attachment. You can use it to link to this attachment from marker’s thumbnail and title. An example usage is in component partials.
If there are more than one models attached (or none at all), marker.singleUrl
value will be an empty string.
Markers displayed in both Map and Markers List components can have image thumbnails. You can set up thumbnail width, height and resizing mode in component’s parameters. Thumbnail will be available in component partials (marker.thumb
value).
Marker’s thumbnail is automatically generated from any image available in following priority:
Current roadmap is to: