Google Maps Plugin (googlemaps.swf)
- include a Google Maps window direct on the viewer
- place hotspots on the map and link them to actions like panorama loading
- it has a integrated customizable radar
- default google maps controls included (position & zoom control)
- it's possible to control the maps and spots dynamically
e.g. to pan around, add or remove spots ...
- it has a XML / Javascript / Actionscript interface
here some examples:
(also included in the download package)
NOTE - this is a commercial plugin - to use it - it must be purchased:
- there is the plugin itself for purchase
- and the plugin plus the full flash source code of it (AS3 for the free MXMLC compiler)
it allowes individual customizing
(e.g. - the hotspot images can be easily changed by just replacing the .png images and doing a recompile)
- updates for this plugin are free!
Links to the share-it! order formulars:
NOTE - the "Extended Download" / "Erweiterter Download" Option for 6.99 USD/EUR is not needed!
It can be removed by clicking the "Trash"-Button!
Usage:
- the position and size of it can by adjusted with the normal plugin attributes
(align, x, y, width, height, ...)
NOTE - avoid animated (tween) resizing - after every small resize the plugin reloads itself
and so resizing becomes very slow!
- the Google maps plugin has following attriubtes:
-
key - the Google maps API key
NOTE - this is the most important attriubte on the first start!
to use the Google maps services a Google maps API key is needed!
Sign Up for the Google Maps API
-
maptype
the type of the map, possible types:
• SATELLITE (default)
• NORMAL
• PHYSICAL
• HYBRID
-
lat
Latitude - Geographic Coordinates
the current map position
-
lng
Longitude - Geographic Coordinates
the current map position
-
zoom
the start zoom level
-
dragging
dragging allowed? - true or false - default=true
-
scrollwheel
scrollwheel allowed? - true or false - default=true
-
continuouszoom
continuous zooming - true or false - default=false
-
keyboard
keyboard navigation - true or false - default=false
-
crosshairs
show crosshairs - true or false - default=false
-
onmapready - event
action / as3 function that will be called when loading the maps plugin is done
and it's ready for using
-
onmapmoved - event
action / as3 function that will be called when the map has moved
-
onmapzoomed - event
action / as3 function that will be called when the map has zoomed
- create spots on the map with the <spot> subnode:
example:
<spot name="s1" lat="44.959808" lng="14.407729"
onhover="showtext(Spot 1);"
onclick="action(s1);"
heading="0"
/>
spot attributes:
- name
name of the spot, must be defined!
- lat
Latitude - Geographic Coordinates
the spot position
- lng
Longitude - Geographic Coordinates
the spot position
- heading
0-360, heading of the panorama linked with this spot
needed to align the radar correct
- onover
action that will be called when mouse comes overs the spot
- onhover
action that will called in intervals when mouse stays/hovers over the spot
use it for showtext() actions
- onout
action that will be called when mouse leaves the spot
- onclick
action that will be called when mouse clicks on spot
- the default Google maps controls can be added with the
<positioncontrol> and <zoomcontrol> subnodes:
example:
<positioncontrol visible="true"
anchor="topleft" x="2" y="2"
/>
<zoomcontrol visible="true"
anchor="topright" x="2" y="2"
hasscrolltrack="true"
/>
positioncontrol / zoomcontrol attributes:
- visible
visible state of the control, true or false, default=false
- anchor
anchor / align origin of the control
possible values: topleft, topright, bottomleft, bottomright
- x / y
offsets from the anchor
- add a map radar <radar> subnode:
example:
<radar visible="true"
dragable="true"
behindspots="true"
size="100"
alpha="0.5"
fillcolor="0xFFFFFF"
fillalpha="1.0"
linecolor="0xFFFFFF"
linealpha="0.0"
linewidth="0.0"
glow="true"
glowcolor="0xFFFFFF"
glowwidth="4"
glowstrength="3"
/>
radar attributes:
- visible
visible state of the radar, true or false, default=false
- dragable
is the radar / viewing area controlable by mouse, default=true
- behindspots
should the radar behind or above the spots, default=true
- size
size / range of the radar, if it's larger than the map it will be clipped
- alpha
alpha value (0-1) of the radar, default=0.5
- fillcolor
fillcolor of the radar area, default=0xFFFFFF (white)
- fillalpha
alpha value (0-1) of the radar area, default=1.0
- linecolor
color of line around the radar area, default=0xFFFFFF (white)
- linealpha
alpha value (0-1) of line around the radar area, default=0.0
- linewidth
width of line around the radar area, default=0.0
- glow
enable a glow effect of the radar, default=true
- glowcolor
color of glow effect, default=0xFFFFFF (white)
- glowwidth
width / range of glow effect, default=4
- glowstrength
strength of glow effect, default=3
- Googlemaps plugin XML / Actionscript / Javascript interface functions:
XML calling example:
plugin[maps].activatespot(spot1);
plugin[maps].pantospot(spot1);
Functions:
-
resetspots()
- remove all spots
-
addspot(name, lat, lng ,heading, active, onclick, onhover, onover, onout)
- add a new spot
- updatespots() must be called to show the added shots
(italic = optional parameters)
-
updatespots()
- updates all spots
- must be called when spots are added or the attributes of a spots has changed
-
activatespot(spotname)
- activates the the spot with the name "spotname"
- disables all other spots
-
panto(lat, lng)
- pans the map to coordinates lat/lng
-
pantospot(spotname)
- pans the map to center at the spot
-
panby(xoffset, yoffset)
- pans the map by xoffset/yoffset pixels
- can be used for own controls
-
zoomin() / zoomin(lat, lng, center, continuous)
- zooms in the map by one zoom level if possible
- can be used for own controls
optional parameters:
- lat / lng
if set, this is the point around which it zoom, otherwise it will zoom in around the center of the map
- center
if true, ot also want to center at lat/lng
- continuous
whether the zoom operation should be continuous (provided that continuous zoom is enabled for the map)
-
zoomout() / zoomout(lat, lng, continuous)
- zooms out the map by one zoom level if possible
- can be used for own controls
optional parameters:
- lat / lng
if set, this is the point around which it zoom, otherwise it will zoom in around the center of the map
- continuous
whether the zoom operation should be continuous (provided that continuous zoom is enabled for the map)
-
setzoom(zoomlevel, continuous)
- zooms to "zoomlevel"
- can be used for own controls
optional parameters:
- continuous
whether the zoom operation should be continuous (provided that continuous zoom is enabled for the map)
-
setcenter(lat, lng, zoomlevel)
- set new lat/lng/zoom
- can be used for own controls
-
setmaptype(maptype)
- set new maptype - "NORMAL","PHYSICAL","SATELLITE","HYBRID"
- can be used for own controls
-
updatecontrols()
- parses and setup the "positioncontrol" and "zoomcontrol" settings
NOTE - when calling these function the prefix "plugin[name]." must be added,
only if the event from which it will be called is direct from the plugin itself this prefix
is not needed!
example xml code:
<krpano version="1.0.7">
<plugin name="maps"
url="googlemaps.swf"
keep="true"
handcursor="false"
align="leftbottom"
x="10"
y="10"
width="300"
height="300"
key=">>ENTER-HERE-YOUR-MAPS-KEY<<"
lat="44.959818"
lng="14.407840"
zoom="18"
maptype="SATELLITE"
dragging="true"
scrollwheel="true"
continuouszoom="false"
keyboard="false"
crosshairs="false"
onmapready=""
onmapmoved=""
onmapzoomed=""
>
<radar visible="true"
size="100"
alpha="0.5"
fillcolor="0xFFFFFF"
fillalpha="1.0"
linecolor="0xFFFFFF"
linealpha="0.0"
linewidth="0.0"
glow="true"
glowcolor="0xFFFFFF"
glowwidth="4"
glowstrength="3"
behindspots="true"
dragable="true"
/>
<positioncontrol visible="true"
anchor="topleft" x="2" y="2"
/>
<zoomcontrol visible="true"
anchor="topright" x="2" y="2"
hasscrolltrack="true"
/>
<spot name="s1" lat="44.959808" lng="14.407729"
onhover="showtext(Spot 1);"
onclick="action(s1);"
heading="0"
active="true"
/>
<spot name="s2" lat="44.959717" lng="14.407840"
onhover="showtext(Spot 2);"
onclick="action(s2);"
heading="90"
/>
</plugin>
<action name="s1">
plugin[maps].activatespot(s1);
plugin[maps].pantospot(s1);
loadpano(pano1.xml,null,MERGE,BLEND(1));
</action>
<action name="s2">
plugin[maps].activatespot(s2);
plugin[maps].pantospot(s2);
loadpano(pano2.xml,null,MERGE,BLEND(1));
</action>
</krpano>