This plugin is completely free for use in any context or connection.
Current version: 1.1
Zip file
Test page with map callouts
VRSmarty XML file
Plugin XML file
Test page with marker groups
Plugin XML file
Test page in setup mode
XML file
Test page with map callouts
VRSmarty XML file
Plugin XML file
Test page with marker groups
Plugin XML file
Test page in setup mode
XML file
googlemap.swf
VRSmarty plugin for displaying a Google map with interactive markers
that have mouse-over, mouse-out and mouse-click functions.
Selectable options are marker crosshair or variable radar cone and
marker Infowindow at mouse-over.
Map markers can be arranged into groups that can be shown or hidden with
a single command.
The following parameters are supported:
In VRSmarty xml file:| xmlfile | xmlFile=googlemap.xml | plugin control XML file |
| setupMode | setupMode=1 | mode for creating and positioning map markers |
The following parameters can be set from VRSmarty:
| xmlfile | xmlFile=googlemapa.xml | load new XML file |
| mapWidth | width=30% | map width in pixels or percentage of pano width |
| mapHeight | height=250 | map height in pixels or percentage of pano height |
| mapSize | size=400:40% | map size (width:height) |
| zoomLevel | zoomLevel=12 | zoom level (0-19 (20 for SATELLITE) ) |
| mapType | mapType=SATELLITE | map type (NORMAL, SATELLITE, HYBRID or PHYSICAL) |
| crosshair | crosshair=1 | crosshair on |
| crosshair=0 | crosshair off | |
| crosshair=59.3095:18.0738 | crosshair position (see NOTES below) | |
| radar | radar=1 | radar on |
| radar=0 | radar off | |
| radar=59.3095:18.0738 | radar position (see NOTES below) |
The following functions can be called from VRSmarty:
| panTo(lat:lon) | panTo('59.3155:18.0700') | pan to new map center |
| or | ||
| panTo(marker) | panTo('The Royal Castle') | pan to marker |
| click(marker) | click('The Yatch Club') | simulate clicking a marker |
| addMarker(data) | addMarker('Small bridge: 59.308335:18.049968:75: global.goSmallBridge') | add map marker (see below) |
| removeMarker(marker) | removeMarker('Small bridge') | remove map marker |
| clearMarkers() | clearMarkers() | clear all markers from map |
| showGroup(group) | showGroup('food') | show marker group(s) |
| hideGroup(group) | hideGroup('pano:views') | hide marker group(s) |
In plugin external xml file, the following tags and attributes are supported:
| In <map> tag: | ||
| key | key="ABQIAAAAu86lsW-dj3..." | Google Maps API key (get this from http:code.google.com) |
| size | size="400:40%" | size of map |
| lang | lang=fr | language code (default: language code is taken from browser settings) |
| mapType | mapType="NORMAL" | set startup map type (see maptypes below) |
| mapCenter | mapCenter="59.3425:18.0900" | set startup map center coordinates (WGS84 Lat and Long separated by ":") |
| zoomLevel | zoomLevel="11" | set startup map zoom level |
| In <controls> tag: | ||
| zoom | zoom="mini" | zoom control: 0, 1 or mini (default 0) |
| position | position="1" | positioning and panning control: 0 or 1 (default 0) |
| mapType | mapType="vertical" | maptype selector: 0, 1 or vertical (default 0) |
| overView | overView="left" | overview map: 0, 1 or left (default 0) |
| In <maptypes> tag: | ||
| include | include="NORMAL,SATELLITE,HYBRID" | comma separated list of maptypes to be included in the maptype selector |
| choose between NORMAL, SATELLITE, HYBRID and PHYSICAL (no default) | ||
| In <infowindowformat> tag: | ||
| width | width="120" | width of infowindow |
| borderColor | borderColor="#CFCFCF" | infowindow border color |
| bgColor | bgColor="#223344" | infowindow background color |
| font | font="Arial" | infowindow text font |
| textColor | textColor="#FFFFF0" | infowindow text color |
| textSize | textSize="11" | infowindow text size |
| bold | bold="1" | infowindow text bold |
| italic | italic="0" | infowindow text italic |
| underline | underline="0" | infowindow text underlined |
| In <icons> tag: | ||
| removeold | removeold="0" | 0 or 1 (default 1) delete old icons when loading new XML file |
| In <icon> child tag: | ||
| name | name="red" | icon name |
| url | url="img/pin2s_red.png" | icon image file (if not specified - a Google standard icon is used) |
| align | align="BL" | icon alignment: L=left, C=center, R=right, T=top, M=middle, B=bottom |
| default: CM (Center-Middle) | ||
| shadow | shadow="1" | tells the Google map to apply a shadow to the icon |
| default | default="1" | will make this the default marker icon |
| defaultVisited | defaultVisited="1" | will make this the default visited marker icon |
| markerColor | markerColor="#C0C0FF" | icon color - for Google standard icons |
| markerRadius | markerRadius="6" | icon radius - for Google standard icons |
| In <markers> tag: | ||
| removeold | removeold="0" | 0 or 1 (default 1) delete old markers when loading new XML file |
| In <markers><marker> tag: | ||
| name | name="City Hall tower" | marker name - also used as tooltip |
| type | type="noradar" | marker type, "pano", "noradar" or "simple", see NOTES below |
| group | group="pano:view" | marker group, see NOTES below |
| hidden | hidden="1" | set to 1 if you want this marker to be initially hidden |
| coords | coords="59.327331:18.055925" | marker coordinates (WGS84 Lat and Long separated by ":") |
| icon | icon="red" | name of icon to be used for marker |
| if not specified - default will be used | ||
| iconVisited | iconVisited="green" | name of icon to be used for visited marker |
| if not specified - default will be used | ||
| offset | offset="48" | pano compass offset - "48" means pano 0 = 48 degrees compass direction |
| command | deprecated - use onClick instead | |
| onClick | onClick="global.gotower()" | VRSmarty command(s) executed when marker is clicked |
| onOver | onOver="global.showP1()" | VRSmarty command(s) executed when the mouse is moved over the marker |
| onOut | onOut="global.hideP1()" | VRSmarty command(s) executed when the mouse is leaving the marker |
| In <markers><marker><infowindow> tag: | ||
| Contains HTML for the marker infowindow (see below) | ||
<infowindow><![CDATA[<body>The Yacht Club<br/><img src="../img/yachtclub.jpg" hspace="0" vspace="3" width="100" height="67" /></body>]]></infowindow> | ||
| In <radar> tag: | ||
| url | url="img/mapradar11.png" | radar image file |
| visible | visible="1" | use radar at current marker: 0 or 1, default 0 |
| length | length="40" | radar cone length, default=30 |
| lineWidth | lineWidth="1" | radar cone line width, default=0 (hairline) |
| lineColor | lineColor="#FFFFFF" | radar cone line color, default=#000000 |
| fillColor | fillColor="#FFFFFF" | radar cone fill color, default=same as line color |
| fillAlpha | fillAlpha="0.25" | radar cone fill alpha, default=0.30 |
| In <crosshair> tag: | ||
| url | url="img/crosshair12.png" | crosshair image file |
| visible | visible="1" | use crosshair at current marker: 0 or 1, default 0 |
| In <onstart><command> tag: | ||
| param_name=value | plugin commands (NOT VRSmarty commands) that you want to execute after the map has been initialized. There is no limit to the number of commands. | |
<onstart> | ||
NOTES: All tag names must be written in lower case, but attribute names are case independent (panTo is equal to panto). If omitted, language code is taken from browser settings. NOTE: Google generally advise against specifying this parameter (unless, of course, you want to force using a certain language). For a listing of language codes, see your browser settings. Specify one <icon> tag for every DIFFERENT marker image that you want to use. Then you can refer to the proper icon name in the <marker> tag. So if you have ten markers on the map that all look the same, you only have to use one <icon> tag. If you don't specify the icon="..." attribute in the <marker> tag, then you will get the default marker icon. And if you don't specify the iconVisited="..." attribute then you will get the default visited marker icon when the marker is panTo'ed. Marker type can be set to "pano", "noradar" or "simple". Default is "pano", which when clicked will be centered in the map, and the radar - if used - will be placed at the marker. If type is set to "noradar", the marker will be centered in the map, but the radar will remain at its present position. Finally, when a "simple" marker is clicked, there will be no change in the map - only the onClick command will be executed. "noradar" and "simple" are thought to be used for map POI's other than panos - like pictures, videos or other links. Certain characters cannot be used directly in an XML file without having to be encoded. Ususally, web encodings (like ' for ' single quote) are used as the data is usually targeted for an HTML page. But here you have to use escape-coding (also called url-encoding) at least for:
" as %22
& as %26 (seems to work as is, but I recommend encoding)
When loading a new XML file with the xmlFile command, only the following tags will be parsed:& as %26 (seems to work as is, but I recommend encoding)
<icons>
<markers>
<onstart>
All the other tags will be ignored. The panTo command is useful when you have changed pano in some other way than by clicking on a map marker. It will center the map on a new position, and the radar (if used) will follow the panTo command - but only if you use panTo=marker_name. This is because the radar needs to know the offset value, which is a marker attribute. If you use panTo=lat:long only the map center will be changed. And if the new destination is too far away from the present point, the map will not pan, but make an immediate jump to the new center point. This is of course depending on the zoom level. The plugin keeps track of which marker is active, so if the same marker is clicked twice in a row, it will only execute the marker command(s) the first time. The panTo command makes the map center on a new position, and the radar follows the panTo command - but only if you use panTo=marker_name. This is because the radar needs to know the offset value, which is a marker attribute. If you use panTo=lat:long only the map center will be changed. And if the new destination is too far away from the present point, the map will not pan, but make an immediate jump to the new center point. This is of course depending on the zoom level. The plugin keeps track of which marker is active, so if the same marker is clicked twice in a row, it will only execute the marker command(s) the first time. The showGroup and hideGroup commands can used to show or hide groups of markers. If you want to change more than one group, you can specify a colon separated list, for example: "showGroup=view:eat". To show or hide all markers use "all". The click command is added to simulate a click on a marker from VRSmarty, and can be particularly useful when loading a new XML file. The difference from the "panTo" command is that the "click" command will execute the command associated with the marker. Any number of onStart commands can be given. The syntax is the same as the usual parameter settings. Allowed parameters are those that can be updated dynamically (see the list above). The reason for having the onStart commands is that certain parameters (like panTo) cannot execute before the map has been initialized. The crosshair can be turned on/off dynamically and moved by setting new coordinates i.e. "crosshair=59.3727:18.0170". The crosshair also always follows the panTo command. What is said about the crosshair above, is also valid for radar. Don't forget to set the offset attribute in the <marker> tag to synchronize radar direction with the pano pan angle. When using the addMarker command you have to include five colon-separated parameters:
external.googlemap.addMarker=name:latitude:longitude:compass_offset:onClick_command
All five parameters must be included.
There is no automatic panning to the new marker when it is added.
Infowindow : For markers which have the <infowindow> childtag specified, an information window (often called callout) will appear above the marker at mouse-over. The content of this callout is described by the Adobe HTML subset, and must be written inside a <body> ... </body> tag if you want the attributes of the <infowindowformat> tag to be applied. The data in the <infowindow> tag must also be surrounded by <![CDATA[ ... ]]>, otherwise you will get an XML parsing error. The tooltip window with the marker name will not be shown for markers with a callout.
Setup mode:
Including the parameter "setupMode=1" forces the plugin to enter a setup mode for handling map markers. The following functions are supported:
| Create marker: | click map where you want the marker placed |
| Move marker: | drag marker to new position |
| Select marker: | click marker |
| Delete marker: | click marker while pressing the Alt key |
| Setting marker tooltip: | change tooltip text in textbox |
| Setting marker offset: | change offset value in textbox |
Example plugin xml file:
<?xml version = '1.0'?>
<map
key="ABQIAAAAu86lsW-dj3QJD95U-nm9CBS2At2q8T81EmvhoOPXhKXvyuASVhTbOTGJMFZQmoqDqf6YdNkPl2Tlyw"
size="400:60%"
mapType="SATELLITE"
mapCenter="59.3425:18.0900"
zoomLevel="11"
>
<controls zoom="mini" position="1" mapType="vertical" overView="left" />
<maptypes include="NORMAL,SATELLITE,HYBRID" />
<infowindowformat width="130" borderColor="#CFCFCF" bgColor="#223344" font="Arial" textColor="#FFFFF0" textSize="11" bold="0" italic="0" underline="0" />
<icons removeOld="1">
<icon name="blue" url="img/dotblue3.png" align="CM" shadow="1" default="1" />
<icon name="green" url="img/dotgreen3.png" align="CM" shadow="1" defaultVisited="1" />
<icon name="bstar" url="img/starblue.png" align="CM" shadow="1" />
<icon name="gstar" url="img/stargreen.png" align="CM" shadow="1" />
<icon name="google" markerColor="#C0C0FF" markerRadius="6" />
</icons>
<markers removeOld="1">
<marker name="City Hall tower" coords="59.327281:18.055522" offset="70" command="goTower()" >
<infowindow><![CDATA[<body><p align="center">City Hall tower<br /><img src="/panos/images/thumbs/cityhall.jpg" hspace="0" vspace="3" width="100" height="67" /></p></body>]]></infowindow>
</marker>
<marker name="The Yacht Club" coords="59.303949:18.073166" offset="10" command="goYachts()" >
<infowindow><![CDATA[<body><p align="center">The Yacht Club<br /><img src="/panos/images/thumbs/yachtclub.jpg" hspace="5" vspace="3" width="100" height="67" /></p></body>]]></infowindow>
</marker>
<marker name="The train bridge" coords="59.310240:18.042809" offset="-15" onClick="goBridge()" >
<infowindow><![CDATA[<body><p align="center">The train bridge<br /><img src="/panos/images/thumbs/pano3.jpg" hspace="0" vspace="3" width="100" height="67" /></p></body>]]></infowindow>
</marker>
<marker name="I work here" coords="59.3727:18.0170" offset="-100" command="goWork()" >
<infowindow><![CDATA[<body><p align="center">I work here<br /><img src="/panos/images/thumbs/work.jpg" hspace="0" vspace="3" width="100" height="67" /></p></body>]]></infowindow>
</marker>
<marker name="I live here" coords="59.3095:18.0738" icon="bstar" iconVisited="gstar" command="goHome" >
<infowindow><![CDATA[<body><p align="center">I live here<br /><img src="/panos/images/thumbs/home.jpg" hspace="0" vspace="3" width="100" height="67" /></p></body>]]></infowindow>
</marker>
</markers>
<radar visible="1" length="40" lineWidth="1" lineColor="#FFFFFF" fillColor="#A0A0FF" fillAlpha="0.30" />
<onstart>
<command>gmap.content.panTo(City Hall tower)</command>
</onstart>
</map>
Version history:
1.1:
width/height set function overridden
width/height set function overridden