Displaying Google maps: Difference between revisions

From Maps for MediaWiki
mNo edit summary
mNo edit summary
Line 1: Line 1:
Maps supports embedding of dynamic maps using the free and open source [https://leafletjs.com Leaflet library].
Maps supports embedding of dynamic maps using Google Maps.


== Basic syntax ==
== Basic syntax ==
Line 6: Line 6:


<pre><nowiki>
<pre><nowiki>
{{#display_map:center=Brandenburg Gate, Berlin, Germany}}
{{#display_map:center=Brandenburg Gate Berlin | service=google}}
</nowiki></pre>
</nowiki></pre>


{{#display_map:center=Brandenburg Gate, Berlin, Germany|scrollzoom=off|zoom=15}}
{{#display_map:center=Brandenburg Gate, Berlin, Germany|scrollzoom=off|zoom=15|service=google}}


== Customization ==
== Customization ==


Leaflet maps can be customized using various parameters.  
Google Maps maps can be customized using various parameters.  


<pre><nowiki>
<pre><nowiki>
{{#display_map:center=Berlin|width=400|height=250}}
{{#display_map:center=Berlin|width=400|height=250|service=google}}
</nowiki></pre>
</nowiki></pre>


{{#display_map:center=Berlin|width=400|height=250|scrollzoom=off|zoom=11}}
{{#display_map:center=Berlin|width=400|height=250|scrollzoom=off|zoom=11|service=google}}


See [[Customizing Leaflet Maps]] for a full overview of customization parameter, including examples.
See [[Customizing Leaflet Maps]] for a full overview of customization parameter, including examples.
Line 28: Line 28:


<pre><nowiki>
<pre><nowiki>
{{#display_map:Brandenburg Gate, Berlin, Germany}}
{{#display_map:Brandenburg Gate Berlin | service=google}}
</nowiki></pre>
</nowiki></pre>


{{#display_map:Brandenburg Gate, Berlin, Germany|scrollzoom=off}}
{{#display_map:Brandenburg Gate, Berlin, Germany|scrollzoom=off|service=google}}


You can display multiple locations by separating them with semicolons. And it is possible to use [[coordinates]] instead of location names.
You can display multiple locations by separating them with semicolons. And it is possible to use [[coordinates]] instead of location names.


<pre><nowiki>
<pre><nowiki>
{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W}}
{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W | service=google}}
</nowiki></pre>
</nowiki></pre>


{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W|scrollzoom=off}}
{{#display_map:Berlin; Brussel; 40° 42' 46.02" N, 74° 0' 21.39" W|scrollzoom=off|service=google}}


You can customize the markers per location. The syntax is:
You can customize the markers per location. The syntax is:
Line 58: Line 58:
   Berlin~The city Berlin~Berlin is a really nice city and there is plenty of Club Mate~Red-marker.png;
   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
   Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
| service=google
}}
}}
</pre>
</pre>
Line 65: Line 66:
   Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
   Amsterdam~The city Amsterdam~Amsterdam is the capital of The Netherlands~Green-marker.png
| scrollwheelzoom=off
| scrollwheelzoom=off
| service=google
}}
}}


Line 82: Line 84:
   Berlin:Brussels:London;
   Berlin:Brussels:London;
   Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
   Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
| service=google
}}
}}
</pre>
</pre>
Line 89: Line 92:
   Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
   Amsterdam:Paris~Amsterdam to Paris line~I am a text~green~0.42~10
| scrollwheelzoom=off
| scrollwheelzoom=off
| service=google
}}
}}


Line 107: Line 111:
   Berlin:Brussels:London;
   Berlin:Brussels:London;
   Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
   Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
| service=google
}}
}}
</pre>
</pre>
Line 114: Line 119:
   Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
   Amsterdam:Paris:Frankfurt~I am a title~And I am a description~green~0.7~10~blue~0.5
| scrollwheelzoom=off
| scrollwheelzoom=off
| service=google
}}
}}


Line 129: Line 135:
   Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
   Amsterdam:100~I am a title~And I am a description~green~0.7~10~blue~0.5
| zoom=14
| zoom=14
| service=google
}}
}}
</pre>
</pre>
Line 137: Line 144:
| scrollwheelzoom=off
| scrollwheelzoom=off
| zoom=14
| zoom=14
| service=google
}}
}}


Line 154: Line 162:
   Berlin:Brussels;
   Berlin:Brussels;
   Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
   Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
| service=google
}}
}}
</pre>
</pre>
Line 161: Line 170:
   Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
   Amsterdam:London~I am a title~And I am a description~green~0.7~10~blue~0.5
| scrollwheelzoom=off
| scrollwheelzoom=off
| service=google
}}
}}


== Alternative syntax ==
== Alternative syntax ==
When you have many customized markers, using the <code>#display_map</code> parser function can get unwieldy. For this reason you can also use the <code><nowiki><display_map></nowiki></code> 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.
When you have many customized markers, using the <code>#display_map</code> parser function can get unwieldy. For this reason you can also use the <code><nowiki><display_map></nowiki></code> 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.


Revision as of 21:09, 7 May 2020

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 | service=google}}
Loading map...

Customization

Google Maps maps can be customized using various parameters. 

{{#display_map:center=Berlin|width=400|height=250|service=google}}
Loading map...

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...

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...

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...

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
}}
Loading map...

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
}}
Loading map...

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
}}
Loading map...

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
}}
Loading map...

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...

I created Maps and this documentation in my free time. If you are finding either useful, please consider supporting me.

Retrieved from "https://maps.extension.wiki/w/index.php?title=Displaying_Google_maps&oldid=113"
MediaWiki
Powered by Semantic MediaWiki
Managed MediaWiki hosting