Help:Embed Google Maps
From ManxWiki
This tutorial explains how to add a map into an article page. For the purpose of these examples 'map' refers to an image generated by Google Maps, whether the image be map, satellite or terrain.
Contents |
Map Variables
Once the map is set up and saved, the page visitor can:
- Change the view type (map, satellite or terrain)
- Scroll the map using the pan arrows or by click and dragging the map
- Zoom in and out using the slider or with mouse clicks.
- Double left clicks zoom in one step,
- Double right clicks zoom out one step.
- Return the map to the original view by clicking the 'arrows in' icon or refreshing the page.
- Use the InfoBox to open a preview of a linked page.
Marker Information
Markers are optional. When used, markers can open an optional Information box. Information boxes can include a title link that directs the visitor to a specific page, general text, inline links, images etc. Where the title links refers to a Wikipage, the plus sign in the box can be clicked to show a preview of the linked page. The title also acts as 'alt text' title that appears when the cursor is hovered over the marker.
Working Example
The code for the above map is as follows:
<googlemap version="0.9" lat="54.151157" lon="-4.468828" type="satellite" zoom="17" width="675" height="525" controls="large"> 54.150497, -4.468828, Tower of Refuge Built in 1832 by Sir [[William Hillary]] </googlemap>
Where:
- Line 1 and 2 are one statement that has overflowed.
- lat and lon are the co-ordinates of the map centre,
- type is the prechosen image type,
- Zoom is preset between 1 and 23, the larger the number the closer the view
- Width and height are the map dimensions
- Large Controls are the pan and zoom controls
- Line 3 shows the co-ordinates of the marker and the InfoBox title (This is also a link to the Tower of Refuge page)
- Line 4 is the general text with a WikiLink to the page about William Hillary
Note: You can switch off the image type and you can switch on 'Overview' which places a collapsible wider angle overview image at the bottom right corner on the map.
| Before creating your first map, click the controls and drag the above example to see what happens. |
Create a Map
| Note: There is a small bug regarding copying and pasting code. Read through this tutorial completely to be prepared to apply a simple fix. |
Open the edit page
Start by opening a page in 'edit' mode then in the row of icons above the text box click the left most 'make a map' icon (it will show a prompt if hovered over).
Note: The 'Make Map' icon may be on the right in Firefox Browsers.
The page will refresh to show the map preview above the normal page text edit box.
Change the visible location
Click the map's controls to zoom out then drag the map to a better location then zoom back in to the prefered view.
Add a Marker
Click on the map to place a marker. You can click again if it appears in the wrong place. Add a page Title if applicable. Add the text that you wish to display. When happy click 'save and close'.
If you save the marker in the wrong place you can still click the marker to 'grab' it and move it.
Set Variables
Under the map preview are the map Variables to select and change navigation type (the slider and Pan controls) and the map size. If changing the default map size select the appropriate navigation type - the large slider overflows if selected in a small map size.
These controls are the options to include
- map/satellite/terrain control, default is ON
- Map scale, default is SMALL - Change to LARGE if you prefer to show the zoom slider.
- Map overview, default is OFF
You can change any of these and look back at the map preview to see who they appear.
| Note: Do NOT click the 'add to map' link, this is for adding an External KML link, not adding the map to the page. |
Code preview
As the options are selected the map preview and the map code refresh to reflect your choices. When you are happy with your selections simply highlight the code then copy and paste it into the normal text edit box for the page.
| Note: This is the bug! When pasting the code, it loses the line breaks! These need to be put back in by using your enter/return key. |
Take care as the text will auto wrap to fit the screen. Take care to observe the difference between the two examples of text in the image. If you have left the variables at default settings they may not appear in the code. This is normal.
No Title Markers
Tower of Refuge is the marker title, it appears on the same line as the co-ordinates seperated by a comma and a space. If no title is included there is no comma after the second cordinate, eg:
<googlemap version="0.9" lat="54.151157" lon="-4.468828" type="satellite" zoom="17" width="675" height="525" controls="large"> 54.150497, -4.468828 Built in 1832 by Sir [[William Hillary]] </googlemap>
Preview your Map
Use the 'show preview' button to see a page preview.
Save your Map
If happy, you can now save the page as normal.
Multiple Markers
If you wish to add more than one marker then click the map, enter title and text, save and close then repeat for each marker.
The map code will look nice and neat when you highlight and copy it, be prepared for the line breaks to go missing when you paste it into the normal text box.
The code for the map on the Douglas Head page looks like this (Titles have been omitted):
==Aerial Map== <googlemap version="0.9" lat="54.143264" lon="-4.467884" type="satellite" zoom="16" width="550" height="500" selector="no" controls="large"> 54.143032, -4.469762 [[Manx Radio]] - Former RADAR Station 54.142491, -4.469526 Apartments - Former Douglas Hotel 54.142788, -4.467841 Apartments - Former Restaurant 54.143484, -4.465771 Douglas Lighthouse 54.143786, -4.466919 Former Port Skillion Bathing Pool 54.143245, -4.46768 Former upper Funicular station 54.144326, -4.467359 Former lower Funicular station 54.143368, -4.467262 [[Camera Obscura]] 54.142788, -4.467238 [[Solway Harvester]] memorial 54.142972, -4.467171 World War 2 Pillbox 54.1421, -4.469064 Amphitheatre 54.143249, -4.468507 [[William Hillary]] Statue 54.143555, -4.468153 Trafalger Memorial 54.140757, -4.47091 Marine Drive Tollgate </googlemap>
Categories: Help | Maps
