Widget:Google Maps

Z Lepší Praha 7
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(Založena nová stránka: {{Widget |author=Sergey Chernyshev |provider=Google Maps |providerurl=http://code.google.com/apis/maps/ |addedon=June 10, 2008 }} This widget allows you to add '''[http:…)
 
 
Řádka 1: Řádka 1:
−
{{Widget
+
<noinclude>__NOTOC__
−
|author=Sergey Chernyshev
+
−
|provider=Google Maps
+
−
|providerurl=http://code.google.com/apis/maps/
+
−
|addedon=June 10, 2008
+
−
}}
+
 
This widget allows you to add '''[http://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page.
 
This widget allows you to add '''[http://code.google.com/apis/maps/ Google Maps]''' widget to your wiki page.
  
−
Created by [[mediawikiwiki:User:Sergey Chernyshev|Sergey Chernyshev]]
+
Created by [http://www.mediawikiwidgets.org/User:Sergey_Chernyshev Sergey Chernyshev]
  
−
<div style="float: right">__TOC__</div>
+
== Using this widget ==
 +
For information on how to use this widget, see [http://www.mediawikiwidgets.org/Google_Maps widget description page on MediaWikiWidgets.org].
  
−
== Parameters ==
+
== Copy to your site ==
−
* '''height''' and '''width''' define map dimensions, 420x350 is default
+
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
−
* '''lat''' - map center latitude
+
</noinclude><includeonly><!--{if not isset($static)}--><!--{counter name="mapDivID" assign="mapDivID"}--><script type="text/javascript" src="http://www.google.com/jsapi"></script>
−
* '''lng''' - map center longitude
+
<script type="text/javascript">
−
* '''maptype''' - type of the map, ''roadmap'' (default), ''satellite'', ''hybrid''
+
google.load("maps", "2.s");
−
* '''zoom''' - zoom level (defaults to 16)
+
// Call this function when the page has been loaded
−
* '''xml''' - URL of XML (KML/GeoRSS) data source (only one can be used for now) [[#Map types|*]]
+
google.setOnLoadCallback(function() {
−
* Markers:
+
if (google.maps.BrowserIsCompatible()) {
−
** '''centermarker''' - if set, then marker is added in the center of the map
+
var center = new GLatLng('<!--{$lat|escape:'quotes'}-->', '<!--{$lng|escape:'quotes'}-->');
−
** Custom markers are defined using '''marker.''name''.lat''', '''marker.''name''.lng''', additional parameters can be set to customize a marker:
+
// Create and Center a Map
−
*** '''marker.''name''.title''' - title (only works on JavaScript-powered maps)
+
var map = new google.maps.Map2(document.getElementById("map<!--{$mapDivID|escape:'html'}-->"),
−
*** '''marker.''name''.letter''' - letter icon (capital A-Z, only works on JavaScript-powered maps)
+
{size: new google.maps.Size('<!--{$width|escape:'quotes'|default:'420'}-->', '<!--{$height|escape:'quotes'|default:350}-->')}
−
*** '''marker.''name''.icon''' - URL for the custom icon, 20x34px (only works on JavaScript-powered maps)
+
);
−
* Controls [[#Map types|*]]:
+
map.setCenter(center, 13);
−
** '''maptypecontrol''' - buttons that let the user toggle between map types (such as Map and Satellite)
+
map.setZoom(Number('<!--{$zoom|escape:'quotes'|default:16}-->'));
−
** '''largemapcontrol''' - displays a large pan/zoom control used on Google Maps
+
map.enableScrollWheelZoom();
−
** '''smallmapcontrol''' - displays a smaller pan/zoom control used on Google Maps
+
−
** '''smallzoomcontrol''' - displays a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps
+
−
** '''scalecontrol''' - displays a map scale
+
−
** '''overviewmapcontrol''' - displays a collapsible overview map in the corner of the screen
+
−
** '''hierarchicalmaptypecontrol''' - displays a selection of nested buttons and menu items for placing many map type selectors
+
  
−
=== Map types ===
+
var createMarker = function(markerLatLng,MarkerTitle,markerIcon,markerPopup) {
−
By default, map is displayed using dynamic user interface with movable map, controls, loadable XML and so on.
+
var marker=new google.maps.Marker(markerLatLng,{title:MarkerTitle,icon:markerIcon});
 +
if (markerPopup) {
 +
GEvent.addListener(marker, "click", function() {
 +
marker.openInfoWindowHtml(markerPopup);
 +
});
 +
}
 +
return marker;
 +
}
 +
<!--{foreach from=$marker item=m}-->
 +
var markerIcon=new GIcon(G_DEFAULT_ICON);
 +
<!--{if isset($m.letter)}-->markerIcon.image="http://www.google.com/mapfiles/marker<!--{$m.letter|escape:'urlpathinfo'}-->.png";<!--{/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 markerPopup="";
 +
<!--{if isset($m.text)}-->markerPopup='<!--{$m.text|escape:'quotes'}-->';<!--{/if}-->
 +
var marker = new createMarker(markerLatLng,'<!--{$m.title|escape:'quotes'}-->',markerIcon,markerPopup);
 +
 +
map.addOverlay(marker);
 +
<!--{/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}-->
  
−
If you want static map image to be displayed, add '''static=yes''' which will tell widget to use [http://code.google.com/apis/maps/documentation/staticmaps/ Google Static Maps API]. It does not support XML (KML or GeoRSS) and controls, but supports markers. Use this one when you want map to load faster and to avoid JavaScript slowing down your page. Static map is also used for graceful degradation when dynamic map is specified, but client doesn't support dynamic features like JavaScript.
+
}
−
 
+
});
−
== Bookmarklet ==
+
</script>
−
Sometimes it's hard to get all the parameters you need for a map to display - coming up with longitude and latitude, correct zoom levels and so on might take too much time.
+
<div id="map<!--{$mapDivID|escape:'html'}-->" style="width: <!--{$width|escape:'html'|default:'420'}-->px; height: <!--{$height|escape:'html'|default:350}-->px"><!--{/if}--><img src="http://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>
−
 
+
−
To help with this problem, we created a bookmarklet that you can use on Google Maps site to grab map widget code for current location with just one click.
+
−
 
+
−
Drag this bookmarklet {{#widget:Bookmarklets/Google Maps|text=Maps Widget Code}} to your links toolbar and just click it when you want to post a location on the map to your wiki.
+
−
 
+
−
You can insert this bookmarklet into your wiki using [[Widget:Bookmarklets/Google Maps|Google Maps bookmarklet widget]].
+
−
 
+
−
== Sample results ==
+
−
=== Moscow, Russia (static map with center marker) ===
+
−
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
+
−
|width=600
+
−
|height=400
+
−
|lat=55.754796
+
−
|lng=37.621479
+
−
|zoom=12
+
−
|static=yes
+
−
|centermarker=yes
+
−
}}</nowiki>
+
−
 
+
−
{{#widget:{{PAGENAME}}
+
−
|width=600
+
−
|height=400
+
−
|lat=55.754796
+
−
|lng=37.621479
+
−
|zoom=12
+
−
|static=yes
+
−
|centermarker=yes
+
−
}}
+
−
 
+
−
=== KML feed from ([http://www.melpedia.com.au/wiki/Landmarks Melbourne Landmark Locations from Melpedia]) ===
+
−
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
+
−
|width=600
+
−
|height=400
+
−
|lat=-37.813683
+
−
|lng=144.963183
+
−
|zoom=14
+
−
|xml=http://www.melpedia.com.au/wiki/Special:KMLExport/Landmarks
+
−
}}</nowiki>
+
−
 
+
−
{{#widget:{{PAGENAME}}
+
−
|width=600
+
−
|height=400
+
−
|lat=-37.813683
+
−
|lng=144.963183
+
−
|zoom=14
+
−
|xml=http://www.melpedia.com.au/wiki/Special:KMLExport/Landmarks
+
−
}}
+
−
 
+
−
=== Metropolitan Museum of Art (with two markers and lots of controls) ===
+
−
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
+
−
|width=600
+
−
|height=400
+
−
|lat=40.77895
+
−
|lng=-73.96231
+
−
|marker.met.lat=40.77895
+
−
|marker.met.lng=-73.96231
+
−
|marker.met.title=Metropolitan Museum of Art
+
−
|marker.met.letter=M
+
−
|marker.met.icon=http://www.metmuseum.org/content/img/presentation/icons/favicon.ico
+
−
|marker.met.text=The Metropolitan Museum of Art (colloquially The Met) is a renowned art museum in New York City. Its permanent collection contains more than two million works, divided into nineteen curatorial departments.
+
−
|marker.centralpark.lat=40.78
+
−
|marker.centralpark.lng=-73.965
+
−
|marker.centralpark.title=Central Park
+
−
|marker.centralpark.text=Central Park is a public park in the center of Manhattan.
+
−
|marker.centralpark.letter=C
+
−
|maptypecontrol=yes
+
−
|largemapcontrol=yes
+
−
|overviewmapcontrol=yes
+
−
|scalecontrol=yes
+
−
}}</nowiki>
+
−
 
+
−
{{#widget:{{PAGENAME}}
+
−
|width=600
+
−
|height=400
+
−
|lat=40.779
+
−
|lng=-73.963
+
−
|marker.met.lat=40.77895
+
−
|marker.met.lng=-73.96231
+
−
|marker.met.title=Metropolitan Museum of Art
+
−
|marker.met.letter=M
+
−
|marker.met.icon=http://www.metmuseum.org/content/img/presentation/icons/favicon.ico
+
−
|marker.met.text=The Metropolitan Museum of Art (colloquially The Met) is a renowned art museum in New York City. Its permanent collection contains more than two million works, divided into nineteen curatorial departments.
+
−
|marker.centralpark.lat=40.78
+
−
|marker.centralpark.lng=-73.965
+
−
|marker.centralpark.title=Central Park
+
−
|marker.centralpark.text=Central Park is a public park in the center of Manhattan.
+
−
|marker.centralpark.letter=C
+
−
|maptypecontrol=yes
+
−
|largemapcontrol=yes
+
−
|overviewmapcontrol=yes
+
−
|scalecontrol=yes
+
−
}}
+
−
{{Comments}}
+

Aktuální verze z 10. 11. 2012, 18:41

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

Created by Sergey Chernyshev

[editovat] Using this widget

For information on how to use this widget, see widget description page on MediaWikiWidgets.org.

[editovat] Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Google Maps article.

Citováno z „http://www.lepsipraha7.cz/wiki/index.php?title=Widget:Google_Maps&oldid=1020“
Osobní nástroje
Jmenné prostory

Varianty
Akce
Navigace
Tvorba obsahu
Nástroje