Maps supports embedding of dynamic maps using Google Maps.
Basic syntax
Displaying maps is done with the #display_map
parser function.
{{#display_map:center=Brandenburg Gate Berlin}}
Loading map...
{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":15,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":false,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}
The above Maps uses Leaflet rather than Google Maps. This is because by default Maps uses Leaflet.
To use Google Maps instead of Leaflet, add service=google
as shown below.
{{#display_map:center=Brandenburg Gate Berlin | service=google}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":15,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
If you want to use Google Maps through your wiki, you can change the default mapping service.
Alternatively you can use the #google_maps
parser function, available since Maps 7.19:
{{#google_maps:center=Brandenburg Gate Berlin}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"googlemaps3","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":15,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
Google Maps API key
If you get the below error when displaying a Google Maps map, ask a wiki administrator to configure the Google Maps API key.
Customization
Google Maps maps can be customized using various parameters.
{{#display_map:center=Berlin|width=400|height=250|service=google}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"400px","height":"250px","centre":{"text":"","title":"","link":"","lat":52.510885,"lon":13.3989367,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":11,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
See Customizing Leaflet Maps for a full overview of customization parameter, including examples.
Displaying data
Markers
{{#display_map:Brandenburg Gate Berlin | service=google}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":14,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[{"text":"","title":"","link":"","lat":52.5162699,"lon":13.377703399031,"icon":""}]}
You can display multiple locations by separating them with semicolons. And it is possible to use coordinates instead of location names.
{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W | service=google}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[{"text":"","title":"","link":"","lat":52.510885,"lon":13.3989367,"icon":""},{"text":"","title":"","link":"","lat":50.8465573,"lon":4.351697,"icon":""},{"text":"","title":"","link":"","lat":40.712783333333,"lon":-74.005941666667,"icon":""}]}
You can customize the markers per location. The syntax is:
Location~Popup title~Popup text~File:CustomIcon~Group~Inline label~File:VisitedIcon
- Location: the location where to display the marker. Both coordinates and addresses are supported
- Popup title and Popup text: optional content for a popup shown when the marker is clicked. No popup is shown if both are empty
- File:CustomIcon: optional name of an image to display instead of the default marker
- Group:
- Inline label: optional label shown next to the marker. Currently only shown when using Google Maps
- File:VisitedIcon: optional name of an image to display as marker when the marker is clicked
Example:
{{#display_map:
Berlin~The city Berlin~Berlin is a really nice city and there is plenty of Club Mate~Red-marker.png;
Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
| service=google
}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Berlin\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EBerlin is a really nice city and there is plenty of Club Mate\n\u003C/p\u003E\u003C/div\u003E","title":"The city Berlin\n","link":"","lat":52.510885,"lon":13.3989367,"icon":"https://pro-wiki.s3.amazonaws.com/1644153356/d/d2/Red-marker.png"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Amsterdam\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAmsterdam is the capital of The Netherlands\n\u003C/p\u003E\u003C/div\u003E","title":"The city Amsterdam\n","link":"","lat":52.3730796,"lon":4.8924534,"icon":"https://pro-wiki.s3.amazonaws.com/1644153356/b/be/Green-marker.png"}]}
Lines
Via the lines
parameter you can display lines on the map. Each line has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the line. The syntax is:
First address:Second address:Optional third address:etc
~Popup title~Popup text~Line color~Line opacity~Line thickness
Example:
{{#display_map:lines=
Berlin:Brussels:London;
Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
| service=google
| center=Brussels
| zoom=6
}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":50.8465573,"lon":4.351697,"icon":""},"title":"","label":"","icon":"","lines":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":52.510885,"lon":13.3989367},{"lat":50.8465573,"lon":4.351697},{"lat":51.5074456,"lon":-0.1277653}]},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAmsterdam to Paris line\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a text\n\u003C/p\u003E\u003C/div\u003E","title":"Amsterdam to Paris line\n","link":"","strokeColor":"green","strokeOpacity":"0.42","strokeWeight":"10","pos":[{"lat":52.3730796,"lon":4.8924534},{"lat":48.8534951,"lon":2.3483915}]}],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":6,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
Polygons
Via the polygons
parameter you can display polygons on the map. Each polygons has at least two locations. As with markers you can specify a popup title and text. You can also specify the looks of the polygon. The syntax is:
First address:Second address:Optional third address
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
~Show only on hover
Example:
{{#display_map:polygons=
Berlin:Brussels:London;
Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
| service=google
| center=Brussels
| zoom=6
}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":50.8465573,"lon":4.351697,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","pos":[{"lat":52.510885,"lon":13.3989367},{"lat":50.8465573,"lon":4.351697},{"lat":51.5074456,"lon":-0.1277653}],"onlyVisibleOnHover":false,"fillColor":"#FF0000","fillOpacity":"0.5"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","pos":[{"lat":52.3730796,"lon":4.8924534},{"lat":48.8534951,"lon":2.3483915},{"lat":50.1106444,"lon":8.6820917}],"onlyVisibleOnHover":false,"fillColor":"blue","fillOpacity":"0.5"}],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":6,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
Circles
Via the circles
parameter you can display circles on the map. Each circles has a center and a diameter. You can specify the popup title and text and the looks of the circle. The syntax is:
Address of the center:Diameter~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
Example:
{{#display_map:circles=
Amsterdam:500;
Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
| zoom=14
| service=google
| center=Amsterdam
}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":52.3730796,"lon":4.8924534,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","centre":{"lon":4.8924534,"lat":52.3730796},"radius":500},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.5","centre":{"lon":4.8924534,"lat":52.3730796},"radius":100}],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":14,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
Rectangles
Via the rectangles
parameter you can display rectangles on the map. Each rectangle has a North East location and a South West location. You can specify the popup title and text and the looks of the rectangle. The syntax is:
North East location:South West location
~Popup title~Popup text~Border color~Border opacity~Border thickness~Fill color~Fill opacity
Example:
{{#display_map:rectangles=
Berlin:Brussels;
Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
| service=google
| center=Brussels
| zoom=6
}}
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"350px","centre":{"text":"","title":"","link":"","lat":50.8465573,"lon":4.351697,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[{"text":"","title":"","link":"","strokeColor":"#FF0000","strokeOpacity":"1","strokeWeight":"2","fillColor":"#FF0000","fillOpacity":"0.5","ne":{"lon":13.3989367,"lat":52.510885},"sw":{"lon":4.351697,"lat":50.8465573}},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EI am a title\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EAnd I am a description\n\u003C/p\u003E\u003C/div\u003E","title":"I am a title\n","link":"","strokeColor":"green","strokeOpacity":"0.7","strokeWeight":"10","fillColor":"blue","fillOpacity":"0.5","ne":{"lon":4.8924534,"lat":52.3730796},"sw":{"lon":-0.1277653,"lat":51.5074456}}],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":6,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[]}
Alternative syntax
When you have many customized markers, using the #display_map
parser function can get unwieldy. For this reason you can also use the <display_map>
tag. It has all the same parameters as the parser function, the only difference is the syntax. Each location goes own its own line and they do not need to be separated with a semicolon.
Example:
<display_map height="150px" scrollwheelzoom="off" service="google">
Gent, Belgie~The city Ghent~Ghent is awesome~ ~ ~Ghent
Brussel~The city Brussel~The capital of Belgium~ ~ ~Brussels
Antwerp~The city Antwerp~ ~ ~ ~Antwerp
</display_map>
Loading map...
{"type":"ROADMAP","minzoom":false,"maxzoom":false,"types":["ROADMAP","SATELLITE","HYBRID","TERRAIN"],"mappingservice":"google","width":"auto","height":"150px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"visitedicon":"","wmsoverlay":false,"zoom":false,"layers":[],"controls":["pan","zoom","type","scale","streetview","rotate"],"zoomstyle":"DEFAULT","typestyle":"DEFAULT","autoinfowindows":false,"resizable":false,"kmlrezoom":false,"poi":true,"cluster":false,"clustergridsize":60,"clustermaxzoom":20,"clusterzoomonclick":true,"clusteraveragecenter":true,"clusterminsize":2,"imageoverlays":[],"kml":[],"gkml":[],"searchmarkers":"","fullscreen":false,"mylocation":false,"mylocationfollow":false,"mylocationzoom":-1,"scrollwheelzoom":false,"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Ghent\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EGhent is awesome\n\u003C/p\u003E\u003C/div\u003E","title":"The city Ghent\n","link":"","lat":51.0538286,"lon":3.7250121,"icon":"","inlineLabel":"Ghent\n"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Brussel\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe capital of Belgium\n\u003C/p\u003E\u003C/div\u003E","title":"The city Brussel\n","link":"","lat":50.8465573,"lon":4.351697,"icon":"","inlineLabel":"Brussels\n"},{"text":"\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003EThe city Antwerp\n\u003C/p\u003E\u003C/div\u003E","title":"The city Antwerp\n","link":"","lat":51.2211097,"lon":4.3997081,"icon":"","inlineLabel":"Antwerp\n"}]}