News Examples Documentation Download Buy Forum Contact

Google Maps Plugin googlemaps.swf Version 1.0.7

  • 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

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 attributes:
    • key - the Google maps API key

      NOTE - this is the most important attribute 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 controllable 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>