Widget:Google Maps: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
KKeine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(24 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<noinclude>__NOTOC__
<noinclude>__NOTOC__
<script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="<nowiki>https://maps.googleapis.com/maps/api/js?key=</nowiki><var>AIzaSyAiZdt5XenJudNqZB85QN50e1Sr5Io9F8U</var>&callback=initMap">
    </script>
This widget allows you to add '''[https://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page.
This widget allows you to add '''[https://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page.


Zeile 30: Zeile 13:


<!--{if not isset($static)}--><!--{counter name="mapDivID" assign="mapDivID"}-->
<!--{if not isset($static)}--><!--{counter name="mapDivID" assign="mapDivID"}-->
<script async defer
 
    src="<nowiki>https://maps.googleapis.com/maps/api/js?key=</nowiki><var>YOUR_API_KEY</var>&callback=initMap">
<script>
    </script>
function initMap() {
<script type="text/javascript">
var center = new google.maps.LatLng('<!--{$lat|escape:'quotes'}-->', '<!--{$lng|escape:'quotes'}-->');
google.load("maps", "2.s");
var map = new google.maps.Map(document.getElementById("map<!--{$mapDivID|escape:'html'}-->"), {
// Call this function when the page has been loaded
  size: new google.maps.Size('<!--{$width|escape:'quotes'|default:'100%'}-->', '<!--{$height|escape:'quotes'|default:500}-->'),
google.setOnLoadCallback(function() {
gestureHandling: 'cooperative'
    if (google.maps.BrowserIsCompatible()) {
});
        var center = new GLatLng('<!--{$lat|escape:'quotes'}-->', '<!--{$lng|escape:'quotes'}-->');
        // Create and Center a Map
        var map = new google.maps.Map2(document.getElementById("map<!--{$mapDivID|escape:'html'}-->"),
            {size: new google.maps.Size('<!--{$width|escape:'quotes'|default:'420'}-->', '<!--{$height|escape:'quotes'|default:350}-->')}
        );
         map.setCenter(center, 13);
         map.setCenter(center, 13);
         map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->'));
         map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->'));
        map.enableScrollWheelZoom();
       
 
var createMarker = function(markerLatLng,MarkerTitle,markerIcon,markerPopup) {
        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) {
                 GEvent.addListener(marker, "click", function() {
                 marker.addListener('click', function() {
                     marker.openInfoWindowHtml(markerPopup);
                     marker.openInfoWindowHtml(markerPopup);
                 });
                 });
Zeile 57: Zeile 34:
         }
         }
         <!--{foreach from=$marker item=m}-->
         <!--{foreach from=$marker item=m}-->
             var markerIcon=new GIcon(G_DEFAULT_ICON);
             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 GLatLng('<!--{$m.lat|escape:'quotes'}-->', '<!--{$m.lng|escape:'quotes'}-->');
             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)}-->map.addOverlay(new GGeoXml('<!--{$xml|escape:'quotes'}-->'));<!--{/if}-->
         <!--{if isset($xml)}-->marker.setMap(new google.maps.GeoXml('<!--{$xml|escape:'quotes'}-->'));<!--{/if}-->
         <!--{if isset($centermarker)}-->map.addOverlay(new google.maps.Marker(center));<!--{/if}-->
         <!--{if isset($centermarker)}-->marker.setMap(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}-->
                 <!--{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&center=<!--{$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&center=<!--{$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.

Abgerufen von „https://unterrichten.zum.de/index.php?title=Widget:Google_Maps&oldid=37079“