Widget:Google Maps: Unterschied zwischen den Versionen

Aus WikiSpeicher
 
(23 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 3: Zeile 3:


Created by [https://www.mediawikiwidgets.org/User:Sergey_Chernyshev Sergey Chernyshev]
Created by [https://www.mediawikiwidgets.org/User:Sergey_Chernyshev Sergey Chernyshev]
Modified by [https://vol-2.com Rolf Fleischmann]


== Using this widget ==
== Using this widget ==
Zeile 9: Zeile 10:
== 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"}--><script type="text/javascript" src="https://www.google.com/jsapi"></script>
</noinclude><includeonly>
<script type="text/javascript">
<style>
google.load("maps", "2.s");
.mapContainer {
// Call this function when the page has been loaded
position: relative;
google.setOnLoadCallback(function() {
width: 100%;
if (google.maps.BrowserIsCompatible()) {
height: 0;
var center = new GLatLng('<!--{$lat|escape:'quotes'}-->', '<!--{$lng|escape:'quotes'}-->');
padding-bottom: 60%;
// Create and Center a Map
}
var map = new google.maps.Map2(document.getElementById("map<!--{$mapDivID|escape:'html'}-->"),
.mapContainer>div {
{size: new google.maps.Size('<!--{$width|escape:'quotes'|default:'100%'}-->', '<!--{$height|escape:'quotes'|default:400}-->')}
position: absolute;
);
left:0;
map.setCenter(center, 13);
top:0;
map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->'));
width: 100%;
map.enableScrollWheelZoom();
height: 100%;
 
}
var createMarker = function(markerLatLng,MarkerTitle,markerIcon,markerPopup) {
</style>
var marker=new google.maps.Marker(markerLatLng,{title:MarkerTitle,icon:markerIcon});
<div id="map" class="mapContainer"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: <!--{$lat|escape:'quotes'}-->, lng: <!--{$lng|escape:'quotes'}-->},
zoom: <!--{$zoom|escape:'quotes'|default:16}-->,
mapTypeId: 'satellite'
});
var infoWin = new google.maps.InfoWindow();
var createMarker = function(markerLatLng,MarkerTitle,markerIcon,markerLetter,markerPopup) {
var marker=new google.maps.Marker({
position: markerLatLng,
map:map,
title:MarkerTitle,
icon: markerIcon,
label: markerLetter
});
if (markerPopup) {
if (markerPopup) {
GEvent.addListener(marker, "click", function() {
marker.addListener('click', function () {
marker.openInfoWindowHtml(markerPopup);
infoWin.setContent(markerPopup);
infoWin.open(map,marker);
//marker.openInfoWindowHtml(markerPopup);
});
});
}
}
Zeile 34: Zeile 56:
}
}
<!--{foreach from=$marker item=m}-->
<!--{foreach from=$marker item=m}-->
var markerIcon=new GIcon(G_DEFAULT_ICON);
var markerIcon='';
<!--{if isset($m.letter)}-->markerIcon.image="https://www.google.com/mapfiles/marker<!--{$m.letter|escape:'urlpathinfo'}-->.png";<!--{/if}-->
<!--{if isset($m.icon)}-->markerIcon='<!--{$m.icon|validate:url}-->';<!--{/if}-->
<!--{if isset($m.icon)}-->markerIcon.image='<!--{$m.icon|validate:url}-->';<!--{/if}-->
var markerLetter = '';
var markerLatLng = new GLatLng('<!--{$m.lat|escape:'quotes'}-->', '<!--{$m.lng|escape:'quotes'}-->');
<!--{if isset($m.letter)}-->markerLetter='<!--{$m.letter|escape:'quotes'}-->';<!--{/if}-->
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,markerLetter,markerPopup);
map.addOverlay(marker);
<!--{/foreach}-->
<!--{/foreach}-->
<!--{if isset($xml)}-->map.addOverlay(new GGeoXml('<!--{$xml|escape:'quotes'}-->'));<!--{/if}-->
<!--{if isset($centermarker)}-->map.addOverlay(new google.maps.Marker(center));<!--{/if}-->
<!--{if isset($maptypecontrol)}-->map.addControl(new GMapTypeControl());<!--{/if}-->
<!--{if isset($largemapcontrol)}-->map.addControl(new GLargeMapControl());<!--{/if}-->
<!--{if isset($smallmapcontrol)}-->map.addControl(new GSmallMapControl());<!--{/if}-->
<!--{if isset($smallzoomcontrol)}-->map.addControl(new GSmallZoomControl());<!--{/if}-->
<!--{if isset($scalecontrol)}-->map.addControl(new GScaleControl());<!--{/if}-->
<!--{if isset($overviewmapcontrol)}-->map.addControl(new GOverviewMapControl());<!--{/if}-->
<!--{if isset($hierarchicalmaptypecontrol)}-->map.addControl(new GHierarchicalMapTypeControl());<!--{/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>
<div id="map<!--{$mapDivID|escape:'html'}-->" style="width: <!--{$width|escape:'html'|default:'100%'}-->px; height: <!--{$height|escape:'html'|default:400}-->px"><!--{/if}--><img src="https://maps.googleapis.com/maps/api/staticmap?sensor=false&key=AIzaSyB2VqCGNrS588hUiejVoi-Ycma2U-P4xJI&center=<!--{$lat|escape:'urlpathinfo'}-->,<!--{$lng|escape:'urlpathinfo'}-->&zoom=<!--{$zoom|escape:'urlpathinfo'|default:16}-->&size=<!--{$width|escape:'urlpathinfo'|default:'100%'}-->x<!--{$height|escape:'urlpathinfo'|default:400}-->&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:'100%'}-->" height="<!--{$height|escape:'html'|default:400}-->"><!--{if not isset($static)}--></div><!--{/if}--></includeonly>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2VqCGNrS588hUiejVoi-Ycma2U-P4xJI&callback=initMap" async defer></script>
</includeonly>

Aktuelle Version vom 29. August 2018, 20:09 Uhr

This widget allows you to add Google Maps widget to your wiki page.

Created by Sergey Chernyshev Modified by Rolf Fleischmann

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.