User:Nitobus/div.GoogleMap

div.GoogleMap is a block control that allows to display the Google Maps in Wikipedia, as well as to draw markers and tracks on maps. Script that provides div.GoogleMap functionality, is located at User:Nitobus/div.GoogleMap.js. To use the div.GoogleMap control you must install the script by adding the following line of code:

importScript('User:Nitobus/div.GoogleMap.js');

to your custom JavaScript file (common.js) at Preferences/Appearance. After saving the common.js file you have to bypass browser’s cache (Key Ctrl + F5 or Key Ctrl + R). All of the examples on this page will also be operable only after editing and saving common.js file.

Google Maps Usage Limits and Licensing

Google Maps is a set of applications provided by Google that are based on the free web mapping service to display maps and satellite images of the Earth. In addition to the web mapping service Google provides the technology of maps embedding on third-party web sites via Google Maps JavaScript API v3. Commercial websites is permitted using Google Maps JavaScript API to generate up to 25 000 map loads per day, in case of exceeding this value one must purchase a Google Maps API license. Non-profit organizations, which include the site owner Wikipedia Wikimedia Foundation, are exempt from Google Maps JavaScript API usage limits.

Examples

To display Google Maps in Wikipedia article, div tag with the GoogleMap class should be used. It should be noted, despite the Google Maps JavaScript API technology provides wide opportunities to access and work with maps, a script that provides the functionality of the div class = "GoogleMap" control uses only a small part of these possibilities namely display maps or satellite images, drawing markers on the map, drawing tracks on the map. Below are a few examples of the use of these opportunities.

Example 1. A simple example

Adding Google Map class to the div element displays a map of the world. Attribute style defines the width and height of rectangle to be allocated by map. All the standard features of Google Maps (scrolling, zooming, map/satellite type switching) are available in map displayed.

<div class="GoogleMap" style="width: 400px; height: 400px;"></div>

Result: Map of the world.

Example 2. Zoom, centering and map type

To choose the display parameters of the map, one should place the div class = "map" element inside the div class = "GoogleMap" element. div class = "map" element determines the properties of the map displayed. Consider the following example.

<div class="GoogleMap" style="width: 500px; height: 500px;">
  <div class="map" data-zoom=12 data-lat=55.7515 data-lon=37.6157 data-mapTypeId=ROADMAP></div>
</div>

Attribute value data-zoom = 12 of the div class = "map" element defines the zoom of the map. A value of 0 corresponds to the lowest zoom level (world map), the value of 20 – to the largest. If this attribute is omitted, the default value is 0.
Attributes values data-lat = 55.7515 data-lon = 37.6157 of the div class = "map" element define the coordinates (latitude and longitude) of the center of the map. If these attributes are omitted, the default values are 0.
Attribute value data-mapTypeId = ROADMAP of the div class = "map" element specifies the map type that can be one of four types:

ROADMAP - road map.

SATELLITE - satellite image.

HYBRID – mixture of road map and satellite image.

TERRAIN - map with terrain information.

If this attribute is omitted, the default value is ROADMAP.
Result: Moscow, center.

Example 3. Adding marker on the map

To add a marker on the map, one should place the div class = "wpt" element inside the div class = "GoogleMap" element. div class = "wpt" element creates the marker. The number of markers (div class = "wpt" elements) on the map is not limited. Consider the same example with the addition of one marker in the center of the map.

<div class="GoogleMap" style="width: 500px; height: 500px;">
  <div class="map" data-zoom=12 data-lat=55.7515 data-lon=37.6157 data-mapTypeId=ROADMAP></div>
  <div class="wpt" data-lat=55.45.05.40 data-lon=37.36.56.52 data-name="The Moscow Kremlin"></div>
</div>

Attribute values data-lat = 55.45.05.40 data-lon = 37.36.56.52 of the div class = "wpt" element defines the coordinates (latitude and longitude) of the marker. Note, in this example coordinates of marker are in the "degrees"."minutes"."seconds"."decimals of second" format, while map center coordinates are in the "degrees"."decimals of degrees" format. Generally, both of these formats are allowed for any object’s coordinates, format with one decimal point will be interpreted as "degrees"."decimals of degrees" and format with two or three decimal points will be interpreted as "degrees"."minutes"."seconds"."decimals of second".
Attribute value data-name = "The Moscow Kremlin" of the div class = "wpt" element specifies the name of the marker and will be displayed when placing mouse over the marker.
Result: The Moscow Kremlin.

Example 4. Adding track on the map

Track is a sequence of points on the map, connected by a line. To add a track on the map, one should place the div class = "trk" element inside the div class = "GoogleMap" element and a set of div class = "trkpt" elements, defining track points, inside the div class = "trk" element. div class = "trk" element does not require the attributes, while div class = "trkpt" element s requireis data-lat and data-lon attributes, that already described above. The number of tracks on the map (div class = "trk" elements) and the number of points in each track (div class = "trkpt" elements) are not limited. Consider an example illustrating a display of multiple markers and one track on the map.

<div class="GoogleMap" style="width: 500px; height: 500px;">
  <div class="map" data-zoom=-1 data-lat=0 data-lon=0 data-mapTypeId=ROADMAP></div>
  <div class="wpt" data-lat=55.776944 data-lon=37.581944 data-name="Belorusskaya"></div>
  <div class="wpt" data-lat=55.779444 data-lon=37.601111 data-name="Novoslobodskaya"></div>
  <div class="wpt" data-lat=55.779722 data-lon=37.633611 data-name="Prospekt Mira"></div>
  <div class="wpt" data-lat=55.776111 data-lon=37.655833 data-name="Komsomolskaya"></div>
  <div class="wpt" data-lat=55.758611 data-lon=37.659722 data-name="Kurskaya"></div>
  <div class="wpt" data-lat=55.739444 data-lon=37.653333 data-name="Taganskaya"></div>
  <div class="wpt" data-lat=55.731111 data-lon=37.636388 data-name="Paveletskaya"></div>
  <div class="wpt" data-lat=55.728888 data-lon=37.622777 data-name="Dobryninskaya"></div>
  <div class="wpt" data-lat=55.729166 data-lon=37.611388 data-name="Oktyabrskaya"></div>
  <div class="wpt" data-lat=55.735277 data-lon=37.593055 data-name="Park Kultury"></div>
  <div class="wpt" data-lat=55.743611 data-lon=37.566666 data-name="Kiyevskaya"></div>
  <div class="wpt" data-lat=55.760277 data-lon=37.577222 data-name="Krasnopresnenskaya"></div>
  <div class="trk">
    <div class="trkpt" data-lat=55.776944 data-lon=37.581944></div>
    <div class="trkpt" data-lat=55.779444 data-lon=37.601111></div>
    <div class="trkpt" data-lat=55.779722 data-lon=37.633611></div>
    <div class="trkpt" data-lat=55.776111 data-lon=37.655833></div>
    <div class="trkpt" data-lat=55.758611 data-lon=37.659722></div>
    <div class="trkpt" data-lat=55.739444 data-lon=37.653333></div>
    <div class="trkpt" data-lat=55.731111 data-lon=37.636388></div>
    <div class="trkpt" data-lat=55.728888 data-lon=37.622777></div>
    <div class="trkpt" data-lat=55.729166 data-lon=37.611388></div>
    <div class="trkpt" data-lat=55.735277 data-lon=37.593055></div>
    <div class="trkpt" data-lat=55.743611 data-lon=37.566666></div>
    <div class="trkpt" data-lat=55.760277 data-lon=37.577222></div>
    <div class="trkpt" data-lat=55.776944 data-lon=37.581944></div>
  </div>
</div>

In this example, markers are placed at the coordinates of Koltsevaya Line stations of the Moscow subway. Track consists of the points with the same coordinates, and thus connects the subway stations by the line. You should also pay attention to the value of the data-zoom = -1 attribute of the div class = "map" element in this example. The value of -1 means that zoom and centering of the map will be calculated automatically to best fit all required markers and tracks. It is clear that in this case data-lat and data-lon attributes of the div class = "map" element are ignored.
Result: The Moscow subway, Koltsevaya line.

Example 5. Displaying a large amount of information

Here is an example of multiple tracks that define the administrative boundaries of Moscow and its administrative districts, with the total number of track points displayed is about 20 thousand. This example does not show any new functionality, but designed only to demonstrate the possibility of displaying a very large amount of information on the map. Since the mapping of such number of points may cause some delay, this example is given on a separate page.
Map boundaries of administrative districts of Moscow