Widget:Google Maps: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
(Die Seite wurde neu angelegt: „<noinclude>__NOTOC__ This widget allows you to add '''[https://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page. Created by [https://www…“) Markierung: 2017-Quelltext-Bearbeitung |
KKeine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
(26 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 9: | Zeile 9: | ||
== Copy to your site == | == Copy to your site == | ||
To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''. | To use this widget on your site, just install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''. | ||
</noinclude><includeonly><!--{if not isset($static)}--><!--{counter name="mapDivID" assign="mapDivID"}--> | </noinclude><includeonly> | ||
<script | <!-- API Key: AIzaSyAiZdt5XenJudNqZB85QN50e1Sr5Io9F8U --> | ||
<!--{if not isset($static)}--><!--{counter name="mapDivID" assign="mapDivID"}--> | |||
<script> | |||
function initMap() { | |||
var center = new google.maps.LatLng('<!--{$lat|escape:'quotes'}-->', '<!--{$lng|escape:'quotes'}-->'); | |||
var map = new google.maps.Map(document.getElementById("map<!--{$mapDivID|escape:'html'}-->"), { | |||
size: new google.maps.Size('<!--{$width|escape:'quotes'|default:'100%'}-->', '<!--{$height|escape:'quotes'|default:500}-->'), | |||
gestureHandling: 'cooperative' | |||
}); | |||
map.setCenter(center, 13); | map.setCenter(center, 13); | ||
map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->')); | map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->')); | ||
var createMarker = function(markerLatLng,MarkerTitle,markerIcon,markerPopup) { | |||
var marker=new google.maps.Marker(markerLatLng,{title:MarkerTitle,icon:markerIcon}); | var marker=new google.maps.Marker(markerLatLng,{title:MarkerTitle,icon:markerIcon}); | ||
if (markerPopup) { | if (markerPopup) { | ||
marker.addListener('click', function() { | |||
marker.openInfoWindowHtml(markerPopup); | marker.openInfoWindowHtml(markerPopup); | ||
}); | }); | ||
Zeile 34: | Zeile 34: | ||
} | } | ||
<!--{foreach from=$marker item=m}--> | <!--{foreach from=$marker item=m}--> | ||
var markerIcon=new | var markerIcon=new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569"); | ||
<!--{if isset($m.letter)}-->markerIcon.image="https://www.google.com/mapfiles/marker<!--{$m.letter|escape:'urlpathinfo'}-->.png";<!--{/if}--> | <!--{if isset($m.letter)}-->markerIcon.image="https://www.google.com/mapfiles/marker<!--{$m.letter|escape:'urlpathinfo'}-->.png";<!--{/if}--> | ||
<!--{if isset($m.icon)}-->markerIcon.image='<!--{$m.icon|validate:url}-->';<!--{/if}--> | <!--{if isset($m.icon)}-->markerIcon.image='<!--{$m.icon|validate:url}-->';<!--{/if}--> | ||
var markerLatLng = new | var markerLatLng = new google.maps.LatLng('<!--{$m.lat|escape:'quotes'}-->', '<!--{$m.lng|escape:'quotes'}-->'); | ||
var markerPopup=""; | var markerPopup=""; | ||
<!--{if isset($m.text)}-->markerPopup='<!--{$m.text|escape:'quotes'}-->';<!--{/if}--> | <!--{if isset($m.text)}-->markerPopup='<!--{$m.text|escape:'quotes'}-->';<!--{/if}--> | ||
var marker = new createMarker(markerLatLng,'<!--{$m.title|escape:'quotes'}-->',markerIcon,markerPopup); | var marker = new createMarker(markerLatLng,'<!--{$m.title|escape:'quotes'}-->',markerIcon,markerPopup); | ||
map.addOverlay(marker); | marker.setMap(map); | ||
//map.addOverlay(marker); | |||
<!--{/foreach}--> | <!--{/foreach}--> | ||
<!--{if isset($xml)}--> | <!--{if isset($xml)}-->marker.setMap(new google.maps.GeoXml('<!--{$xml|escape:'quotes'}-->'));<!--{/if}--> | ||
<!--{if isset($centermarker)}--> | <!--{if isset($centermarker)}-->marker.setMap(new google.maps.Marker(center));<!--{/if}--> | ||
<!--{if isset($maptype)}-->map.setMapType(<!--{if $maptype eq 'satellite'}-->G_SATELLITE_MAP<!--{elseif $maptype eq 'hybrid'}-->G_HYBRID_MAP<!--{else}-->G_NORMAL_MAP<!--{/if}-->);<!--{/if}--> | <!--{if isset($maptype)}-->map.setMapType(<!--{if $maptype eq 'satellite'}-->G_SATELLITE_MAP<!--{elseif $maptype eq 'hybrid'}-->G_HYBRID_MAP<!--{else}-->G_NORMAL_MAP<!--{/if}-->);<!--{/if}--> | ||
</script> | |||
} | |||
</script> | |||
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiZdt5XenJudNqZB85QN50e1Sr5Io9F8U&callback=initMap"></script> | |||
<div id="map<!--{$mapDivID|escape:'html'}-->" style="width: <!--{$width|escape:'html'|default:'420'}-->px; height: <!--{$height|escape:'html'|default:350}-->px"><!--{/if}--><img src="https://maps.googleapis.com/maps/api/staticmap?sensor=false¢er=<!--{$lat|escape:'urlpathinfo'}-->,<!--{$lng|escape:'urlpathinfo'}-->&zoom=<!--{$zoom|escape:'urlpathinfo'|default:16}-->&size=<!--{$width|escape:'urlpathinfo'|default:'420'}-->x<!--{$height|escape:'urlpathinfo'|default:350}-->&markers=<!--{if isset($centermarker)}--><!--{$lat|escape:'urlpathinfo'}-->,<!--{$lng|escape:'urlpathinfo'}-->%7C<!--{/if}--><!--{foreach from=$marker item=m}--><!--{$m.lat|escape:'urlpathinfo'}-->,<!--{$m.lng|escape:'urlpathinfo'}-->%7C<!--{/foreach}-->&maptype=<!--{$maptype|escape:'urlpathinfo'|default:'roadmap'}-->" width="<!--{$width|escape:'html'|default:'420'}-->" height="<!--{$height|escape:'html'|default:350}-->"><!--{if not isset($static)}--></div><!--{/if}--></includeonly> | <div id="map<!--{$mapDivID|escape:'html'}-->" style="width: <!--{$width|escape:'html'|default:'420'}-->px; height: <!--{$height|escape:'html'|default:350}-->px"><!--{/if}--><img src="https://maps.googleapis.com/maps/api/staticmap?sensor=false¢er=<!--{$lat|escape:'urlpathinfo'}-->,<!--{$lng|escape:'urlpathinfo'}-->&zoom=<!--{$zoom|escape:'urlpathinfo'|default:16}-->&size=<!--{$width|escape:'urlpathinfo'|default:'420'}-->x<!--{$height|escape:'urlpathinfo'|default:350}-->&markers=<!--{if isset($centermarker)}--><!--{$lat|escape:'urlpathinfo'}-->,<!--{$lng|escape:'urlpathinfo'}-->%7C<!--{/if}--><!--{foreach from=$marker item=m}--><!--{$m.lat|escape:'urlpathinfo'}-->,<!--{$m.lng|escape:'urlpathinfo'}-->%7C<!--{/foreach}-->&maptype=<!--{$maptype|escape:'urlpathinfo'|default:'roadmap'}-->" width="<!--{$width|escape:'html'|default:'420'}-->" height="<!--{$height|escape:'html'|default:350}-->"><!--{if not isset($static)}--></div><!--{/if}--></includeonly> |
Aktuelle Version vom 23. Januar 2018, 12:12 Uhr
This widget allows you to add Google Maps widget to your wiki page.
Created by Sergey Chernyshev
Using this widget
For information on how to use this widget, see widget description page on MediaWikiWidgets.org.
Copy to your site
To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:Google Maps.