The tag <rd:map> is needed to show a map on the webpage.
Attributes:| Name | Description | Data type | Standard Value |
| autoCenter | Set this to true to let the map resize, pan and zoom automatically to display all markers on the map. | boolean | false |
| doubleClickZoom | Enables/disables double click to zoom in and out (enabled by default). | boolean | true |
| dragging | Enables/disables the dragging of the map. | boolean | true |
| googleBar | Enables/disables the GoogleBar, an integrated search control, to the map. When enabled, this control takes the place of the default Powered By Google logo. | boolean | false |
| height* | The height (in pixels or percent) the map should have. | string | |
| key* | Google Maps API key. | string | |
| mapControl | Defines the look of the control buttons for the map. Possible options:
|
string | largeMap |
| mapId* | The id of the map | string | |
| overviewMap | Creates a collapsible overview mini-map in the corner of the main map for reference location and navigation (through dragging). It creates an overview map with a one-pixel black border. This control is placed on the bottom right corner of the map. | boolean | false |
| scaleControl | Creates a control that displays the map scale. | boolean | false |
| scrollWheelZoom | Enables/disables zooming using a mouse"s scroll wheel. | boolean | false |
| showDirections | Boolean. If this is true, it will be possible to calculate the route between two markers. | boolean | false |
| search | Boolean. If this is true, it will be possible to search in the markers on the map. | boolean | false |
| width* | The width (in pixels or percent) the map should have. | string | |
| deptLinkText | This value is used for the text in the links to set the departure for the routeplanner. | string | From here |
| destLinkText | This value is used for the text in the links to set the destination for the routeplanner. | string | To here |
| onclick | This event is fired when the user clicks on the map with the mouse. You can get the position of where the click happened by using the "latlng" attribute. (see this tutorial to see how) | String | |
| ondblclick | This event is fired when a double-click is done on the map. You can get the position of where the double click happened by using the "latlng" attribute. (see this tutorial to see how) | String | |
| onsinglerightclick | This event is fired when the DOM contextmenu event is fired on the map. | String | |
| onmovestart | This event is fired when the map view starts changing. This can be caused by dragging, in which case a dragstart event is also fired, or by invocation of a method that changes the map view. | String | |
| onmove | This event is fired, possibly repeatedly, while the map view is changing. | String | |
| onmoveend | This event is fired when the change of the map view ends. | String | |
| onzoomend | This event is fired when the map reaches a new zoom level. | String | |
| onmaptypechanged | This event is fired when another map type is selected. | String | |
| oninfowindowopen | This event is fired when a info window opens. | String | |
| oninfowindowbeforeclose | This event is fired before a info window closes. | String | |
| oninfowindowclose | This event is fired when a info window closes. | String | |
| onmouseover | This event is fired when the user moves the mouse over the map from outside the map. | String | |
| onmouseout | This event is fired when the user moves the mouse off the map. | String | |
| onmousemove | This event is fired when the user moves the mouse inside the map. | String | |
| ondragstart | This event is fired when the user starts dragging the map. | String | |
| ondrag | This event is fired while the user drags the map. | String | |
| ondragend | This event is fired when the user stops dragging the map. | String | |
| onload | This event is fired when the map setup is complete. This means position, zoom and maptype are all initialized, but tile images may still be loading. | String |
* Required
Parent: map
Attributes:| Name | Description | Data type | Standard Value |
| address* | The street and housenumber of the marker. | string | |
| city* | The (postal code and) name of the city of the marker. | string | |
| country* | The full name or abbreviation of the country of the marker. | string | |
| iconAnchorX | The x-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | integer | 9 |
| iconAnchorY | The y-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | integer | 34 |
| iconHeight | the height of the icon’s image | integer | 34 |
| iconLink | The url to the icons’ image if a different image is desired. | string | |
| iconWidth | The width of the icons’ image | integer | 20 |
| id* | The unique id of the marker. | string | |
| infoShadowAnchorX | The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. | integer | |
| infoShadowAnchorY | The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. | integer | |
| infoWindowAnchorX | The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | integer | 9 |
| infoWindowAnchorY | The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | integer | 2 |
| latitude | If you already have the coordinates for the marker, you can add its latitude. If this is filled in together with longitude, the Google Webservice won’t be called. | decimal | |
| longitude | If you already have the coordinates for the marker, you can add its longitude. If this is filled in together with latitude, the Google Webservice won’t be called. | decimal | |
| name* | Name of this marker, used to display in the search results and in the infowindow of the clusterer | string | |
| searchValue | When search is enabled, the search method will look in this value to find suitable markers | string | |
| shadowHeight | the height of the shadows’ image | integer | 34 |
| shadowLink | The url to an image of the icons’ shadow | string | |
| shadowWidth | the width of the shadows’ image | integer | 37 |
| clickable | Specify whether or not the user can click on the marker. | boolean | true |
| onclick | This event is fired when the marker icon was clicked. | String | |
| ondblclick | This event is fired when the marker icon was double-clicked. | String | |
| onmousedown | This event is fired when the DOM mousedown event is fired on the marker icon. | String | |
| onmouseup | This event is fired when the DOM mouseup event is fired on the marker icon. | String | |
| onmouseover | This event is fired when the mouse enters the area of the marker icon. | String | |
| onmouseout | This event is fired when the mouse leaves the area of the marker icon. | String | |
| oninfowindowopen | This event is fired when the info window of this marker was opened through this marker. | String | |
| oninfowindowbeforeclose | This event is fired before the info window of this marker is closed through this marker. | String | |
| oninfowindowclose | This event is fired when the info window of this marker is closed through this marker. | String |
* Required
Parent: map
Attributes:| Name | Description | Data type | Standard Value |
| gridSize | The size of the grid for which a cluster marker will be create. | integer | 16 |
| minMarkersPerCluster | the minimum amount of markers in a cluster. | integer | 3 |
| maxVisibleMarkers | The maximum amount of markers that are visible on the map. | integer | 120 |
* Required
Parent: clusterer
Attributes:| Name | Description | Data type |
| iconAnchorX* | The x-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | integer |
| iconAnchorY* | The y-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. | integer |
| iconHeight* | The height of the icon’s image | integer |
| iconLink* | The url to the icons’ image. | string |
| iconWidth* | The width of the icons’ image | integer |
| infoShadowAnchorX* | The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. | integer |
| infoShadowAnchorY* | The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. | integer |
| infoWindowAnchorX* | The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | integer |
| infoWindowAnchorY* | The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. | integer |
| shadowHeight* | The height of the shadows’ image | integer |
| shadowLink* | The url to an image of the icons’ shadow | string |
| shadowWidth* | The width of the shadows’ image | integer |
* Required
Parent: map
Attributes:| Name | Description | Data type |
| for* | The id of the marker for which the info window is created. | string |
| text* | The text that you want to show in the info window. | string |
* Required
Parent: map
Attributes:| Name | Description | Data type | Standard Value |
| hybridMap | This map type displays a transparent layer of major streets on satellite images. | boolean | false |
| marsInfrared | This map type displays a shaded infrared map of the surface of Mars, where warmer areas appear brighter and colder areas appear darker. | boolean | false |
| marsVisible | This map type displays photographs taken from orbit around Mars. This map type is not displayed within map type controls by default. | boolean | false |
| moonElevation | This map type displays a shaded terrain map of the surface of the Moon, color-coded by altitude. This map type is not displayed within map type controls by default. | boolean | false |
| moonVisible | This map type displays photographs taken from orbit around the moon. This map type is not displayed within map type controls by default. | boolean | false |
| normalMap | This map type displays a normal street map. | boolean | true |
| physicalMap | This map type displays maps with physical features such as terrain and vegetation. This map type is not displayed within map type controls by default. | boolean | false |
| satelliteMap | This map type displays satellite images. | boolean | true |
| skyVisible | This map type shows a mosaic of the sky, covering the full celestial sphere. | boolean | false |
| useMenu | If true it provides a control for selecting and switching between supported map types via a drop-down menu. Controls will be made available for all map types currently attached to the map at the time the control is constructed. | boolean | false |
| useShortNames | Make use of the short (alt) names for the map types if it is set to true | boolean | false |
* Required
This tag will put a search panel on the page. With this you can search within the markers. For more customization options, have a look at searchButton, searchField and searchResults.
Attributes:| Name | Description | Data type |
| id* | The unique id of the panel. | string |
| style |
The CSS style you want to give to the panel.
Attention! The panel has no lay-out! |
string |
| styleClass | Css style class for this panel. | String |
* Required
This tag places a button on your page that searches for the value in searchField, and displays the results in searchResults.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this button | String | |
| style | Css styles for this button. | String | |
| styleClass | Css style class for this button. | String | |
| value | The text for the button to display. | String |
* Required
The value to search for on the map.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this field | String | |
| style | Css styles for this field. | String | |
| styleClass | Css style class for this field. | String | |
| size | The size of this textfield. | Integer |
* Required
This panel holds the results of a search action initiated by the searchButton
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| value | The text for the link to display. | String |
* Required
This tage will put a route planner panel on the page. The route that was searched for, will be shown in this panel. For more customization options, please take a look at directionsOutputPanel, directionsInputPanel, departurePanel, destinationPanel, calculateButton, resetMapButton and printFriendlyLink.
Attributes:| Name | Description | Data type |
| id* | The unique id of the panel. | string |
| style |
The CSS style you want to give to the panel.
Attention! The panel has no lay-out! |
string |
| styleClass | Css style class for this panel. | String |
* Required
This tag contains the input fields for directions (departure and destination) plus the different buttons to calculate the directions and reset the map.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String |
* Required
This panel inludes the output from a routeplanner request (the directions for the route).
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String |
* Required
This panel show the departure chosen by the user. It contains 3 textfields: name, address and city
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| title | The title for this panel, displayed above the first textfield. | String |
* Required
This panel show the destination chosen by the user. It contains 3 textfields: name, address and city
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| title | The title for this panel, displayed above the first textfield. | String |
* Required
The button used to calculate the directions.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| value | The text displayed on the button. | String |
* Required
This button puts the map back to its original state plus clears the directions input and output panel.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| value | The text displayed on the button. | String |
* Required
With this link you can go to a site wich contains printable directions.
Attributes:| Name | Description | Data type | Standard Value |
| id* | unique id of this panel | String | |
| style | Css styles for this panel. | String | |
| styleClass | Css style class for this panel. | String | |
| value | The text for the link to display. | String | |
| target | This attribute specifies where to open the linked document. For more information about this, please visit W3Schools. | _blank; _self; _top; _parent | _blank |
* Required
This tag puts a polyline on your map. Please note that you need at least two points to create a polyline.
Attention! There's a known bug while drawing polylines. It could be that the polyline doesn't follow the polylinePoints as they were given to the polyline. This bug will be fixed in the following release.
| Name | Description | Data type | Standard Value |
| id* | Unique id of this polyline. | String | |
| color | The color of the polyline. A color in the form of "#RRGGBB" must be used. | String | #0000FF |
| weight | The tickness of the polyline. A value must be given in pixels (without the px notation). | Number | 10 |
| opacity | The opacity of the polyline. The value must be between 0 and 1. | Number | 0.5 |
| clickable | Toggles whether or not the polyline is clickable. The default value for this option is true, i.e. if the option is not specified, the polyline will be clickable. | Boolean | True |
| geodesic | Render each edge of the polyline as a geodesic (a segment of a "great circle"). A geodesic is the shortest path between two points along the surface of the Earth. | Boolean | false |
| mouseOutTolerance | This property contains the distance (in pixels) for a mouse cursor to move orthogonal to the polyline before the mouseout event fires. | Number | |
| onremove | This event is fired when the polyline is removed from the map. | String | |
| onvisibilitychanged | This event is fired when the polyline is toggled from hidden to visible or vice versa. | String | |
| onclick | This event is fired when the polyline is clicked. You can ask for the latlng parameter in the function to retrieve the coordinates of where the click happened. | String | |
| onmouseover | This event is fired when the mouse moves onto the polyline. | String | |
| onmouseout | This event is fired when the mouse moves off the polyline. | String | |
| onlineupdated | This event is fired when the polyline is changed/updated. | String | |
| onendline | This event is fired when line drawing is completed by the user. | String | |
| oncancelline | This event is fired when line drawing is aborted by the user. | String |
* Required
This tag is to be used inside the <polyline> body. It adds another point to the polyline.
Attributes:| Name | Description | Data type | Standard Value |
| latitude* | The latitude of the point. | Number | |
| longitude* | The longitude of the point. | Number |
* Required
When using many points, it can be useful to use a bunch of encoded points. These load faster onto the map, especially when using large amounts of points. You can use this online encoder from google or create your own encoder using these instructions.
Attributes:| Name | Description | Data type | Standard Value |
| points* | This is a string containing the encoded latitude and longitude coordinates. | String | |
| zoomFactor* | This is the magnification between adjacent sets of zoom levels in the encoded levels string. | Number | |
| levels* | This is a string containing the encoded polyline zoom level groups. | String | |
| numLevels* | This is the number of zoom levels contained in the encoded levels string. | Number |
* Required
This tag puts a polygon on your map.
Attributes:| Name | Description | Data type | Standard Value |
| id* | Unique id of this polygon. | String | |
| strokeColor | The stroke color of the polygon. A color in the form of "#RRGGBB" must be used. | String | #0000FF |
| strokeWeight | The width (in pixels) of the stroke. | Number | 10 |
| strokeOpacity | The opacity of the stroke. The value must be between 0 and 1. | Number | 0.6 |
| fillColor | The fill color of the polygon. A color in the form of "#RRGGBB" must be used. | String | #0000FF |
| fillOpacity | The fill opacity of the polygon. The value must be between 0 and 1. | Number | 0.4 |
| clickable | Toggles whether or not the polygon is clickable. The default value for this option is true, i.e. if the option is not specified, the polygon will be clickable. | Boolean | True |
| mouseOutTolerance | This property contains the distance (in pixels) for a mouse cursor to move outside the polygon before the mouseout event fires. | Number | |
| onremove | This event is fired when the polygon is removed from the map. | String | |
| onvisibilitychanged | This event is fired when the polygon is toggled from hidden to visible or vice versa. | String | |
| onclick | This event is fired when the polygon is clicked. You can ask for the latlng parameter in the function to retrieve the coordinates of where the click happened. | String | |
| onmouseover | This event is fired when the mouse moves onto the polygon. | String | |
| onmouseout | This event is fired when the mouse moves off the polygon. | String | |
| onlineupdated | This event is fired when the polygon is changed/updated. | String | |
| onendline | This event is fired when line drawing is completed by the user. | String | |
| oncancelline | This event is fired when line drawing is aborted by the user. | String |
* Required
This tag is to be used inside the <polygon> body. It adds another point to the polygon.
Attributes:| Name | Description | Data type | Standard Value |
| latitude* | The latitude of the point. | Number | |
| longitude* | The longitude of the point. | Number |
* Required
This tag is to be used inside the <map> body. When you have the tiles, this tag adds an overlay on to the map.
Attributes:| Name | Description | Data type | Standard Value |
| images* | The folder in which the tile structure is located. | Text | |
| mapMinZoom* | The lowest zoom level at which the map will visable. Make sure that the tile structure supports this level! | Number | |
| mapMaxZoom* | The highest zoom level at which the map will visable. Make sure that the tile structure supports this level! | Number | |
| opacity* | The opacity of the map | Number | |
| leftUnderLat* | The latitude of the bottom left corner of the overlay | Number | |
| leftUnderLng* | The longitude of the bottom left corner of the overlay | Number | |
| rightUpperLat* | The latitude of the top right corner of the overlay | Number | |
| rightUpperLng* | The longitude of the top right corner of the overlay | Number |
* Required