close panorama

Google Maps Plugin googlemaps.swf Version 1.0.8.14
Select Version:

  • The Google Maps Plugin adds a Google Map to the viewer.
  • The map can be freely placed and sized anywhere on the screen.
  • It's possible to place spots on the map and link them to krpano actions like loadpano to load a new panoramas when clicking a spot.
  • The plugin has an integrated customizable radar which can apear on the activatted spot.
  • The standard Google Maps controls, like the position and zoom controls can be also added.
  • The map can be rotated / viewed in a 3D Perspective View.
  • And it's possible to control the whole maps and spots dynamically, e.g. pan/zoom around on the map, add or remove spots...

Plugin documentation topics:

Buy / Order

  • The krpano Google Maps Plugin is an additional Commercial Plugin.
  • To use it a license for the plugin must be bought.
  • Without license a krpano watermark will be shown in the map.
  • Additionally there is the AS3 (Actionscript 3) Flash source code for AS3 developers available. The source code allows further individual customizing but requires good coding knowledge. But Note - the AS3 code should be only bought by professional developers. The source code is a .as file for the mxmlc compiler from the Flex SDK! Compiling or using the code with Flash CS is not possible! There are only build instructions for Windows included. Compiling on Mac should be possible too but there are no instructions for it included!
  • Updates - All updates for the Google Maps Plugin are free. Just get the newest googlemaps.swf with the newest krpano Viewer Download Package from here. For updates for the Source Code write a short mail.
    UPDATE NOTE - for orders before version 1.0.8.14 see here - License Update.
  • The plugin can be bought here on this page or on the krpano Buy page.

Usage Syntax

The Google Maps Plugin embedding with all attributes / sub-nodes and their default values: 
<plugin name="map"
        url="googlemaps.swf"
        align="leftbottom" width="400" height="300" x="0" y="0"
        keep="true"
        key="...your Google Maps API key for your domain..."
        maptype="satellite"
        maptypes="normal|satellite|physical|hybrid"
        lat="..."
        lng="..."
        zoom="1"
        viewmode="2D"
        pitch="0.0"
        roll="0.0"
        yaw="0.0"
        maphandcursor="false"
        activespotenabled="false"
        dragging="true"
        scrollwheel="true"
        continuouszoom="false"
        dbclicking="false"
        keyboard="false"
        crosshairs="false"
        bgcolor="0xE0E0E0"
        bgalpha="1.0"
        onmapready=""
        onmaptypechanged=""
        onmapmoved=""
        onmapzoomed=""
>
  <spotstyle name="style1" ... />
  ...
  
  <spot name="spot1" ... active="true" />
  <spot name="spot2" ... />
  <spot name="spot3" ... />
  ...
  
  <radar visible="true" ... />
  
  <positioncontrol    visible="false" ... />
  <zoomcontrol        visible="false" ... />
  <maptypecontrol     visible="false" ... />
  <navigationcontrol  visible="false" ... />
  <overviewmapcontrol visible="false" ... />
  
</plugin>

Plugin Attributes

  • key
    • The Google Maps API key.
    • To be able to use the Google Maps services a Google Maps API key is needed!
    • One key is only valid for one domain.
    • Sign up here for a Google Maps API key...

    • Multi-Domain-Key-Pairs
      • To be able to use the plugin on more than one domain, it is possible to use several domain-key pairs as key.
      • Just separate all the domains and keys by pipe | characters.
      • To set a key for local testing (file://) there is the special domain name "local" available.
      • Syntax / usage example:
        key="yourdomain1.com|key1|yourdomain2.com|key2|local|key1"
  • maptype
    • Select the type of the map:
      • satellite (default)
      • normal
      • physical
      • hybrid
  • maptypes
    • Set the avialable /chouseable map types.
    • Can be any combinations of the map type values.
    • Default: normal|satellite|physical|hybrid
  • lat / lng
    • Latitude and Longitude in degrees.
    • The geographic coordinates of the current map center position.
    • How / where to get?
      • Either directly from the Google Maps page.
      • Or from here: Get Lat Lon (www.getlatlon.com)
        A nice webpage which allows getting the coordinates in the right format in an easy and simple way.
  • zoom
    • Set zoom level of the map.
    • Can be from 0 to 32.
  • viewmode
    • Select a 2D or a 3D view of the map.
    • Possible settings: 2D or 3D.
  • pitch / roll / yaw
    • The 3D camera rotation when using viewmode="3D".
  • maphandcursor
    • Show a hand cursor when the mouse is over the map.
  • activespotenabled
    • Should the active spot be enabeld?
      That means - should the active spot react to click or over events.
  • dragging
    • Should it be possible to drag the map by the mouse?
  • scrollwheel
    • Should it be possible to zoom in the map by the mouse wheel?
  • continuouszoom
    • Should the zooming in the map be stepwise or continuous?
  • dbclicking
    • Should it be possible to use double clicking to zoom in?
  • keyboard
    • Allow moving in the map by the keyboard?
  • crosshairs
    • Show a crosshairs at the map center.
  • bgcolor / bgalpha
    • The color and alpha of the map background.

Plugin Attributes - Events

  • onmapready
    • Will be called when the Google Maps Plugin is loaded and ready for usage.
  • onmaptypechanged
    • Will be called when the map type was changed.
  • onmapmoved
    • Will be called when the map was moved.
  • onmapzoomed
    • Will be called when the map was zoomed.

Plugin Subnodes - <spotstyle>

  • With the <spotstyle> subnode it is possible to define styles for the spots.
  • A spot can be assigned to a spotstyle by the style attribute.
  • There is a predefined style named "DEFAULT".

The <spotstyle> node with all settings and their default values: 
<spotstyle name="DEFAULT"
           url=""
           overurl=""
           activeurl=""
           edge="center"
           x="0"
           y="0"
           shadow="true"
           />

<spotstyle> Attributes

  • name
    • The name of the spotstyle.
      Use this name in the style attribute of a spot.
  • url
    • The url / path to an image that should be used for the spot.
      When not defined the default image (a blue dot) will be used.
  • overurl
    • The url / path to an image that will be used for the spot when it mouse is over the spot.
      When not defined the default image (a blue dot) will be used.
  • activeurl
    • The url / path to an image that will be used when the spot is activated.
      When not defined the default image (a green dot) will be used.
  • edge
    • The alignment edge / anchor point of the spot image.
      Possible values: lefttop, left, leftbottom, top, center, bottom, righttop, right, rightbottom.
  • x / y
    • The offset in pixels from the edge point to the image.
  • shadow
    • Should a shadow by added to the spot image?

Plugin Subnodes - <spot>

  • With the <spot> subnode it is possible to define spots on the map.
  • A spot will be placed at lat/lng coordinates and can be linked to panos by using the loadpano / loadscene actions in the onclick event.

The <spot> node with all settings and their default values: 
<spot name="..."
      style="DEFAULT"
      url="..."
      lat="..."
      lng="..."
      heading="0"
      active="false"
      onover=""
      onhover=""
      onout=""
      onclick=""
      />

<spot> Attributes

  • name
  • style
    • The name of the spotstyle that should be used for that spot.
  • url
    • The url / path to an image that should be used for the spot.
      When not defined the image from the spotstyle will be used.
  • lat / lng
    • Latitude and Longitude in degrees.
    • The geographic coordinates of the spot.
    • How / where to get?
      • Either directly from the Google Maps page.
      • Or from here: Get Lat Lon (www.getlatlon.com)
        A nice webpage which allows getting the coordinates in the right format in an easy and simple way.
  • heading
    • The heading of the pano in degrees, needed to align the pano orientation with the radar on the map.
  • active
    • State of the spot. When set to true the spot will be activated. That means the spot will show the active spotstyle image (when no url was set) and that the radar will be shown at the spot location.
    • To activate a spot dynamically use the activatespot() action.

<spot> Events

  • onover
    • Actions / functions that will be called when the mouse moves over the spot element.
    onhover
    • Actions / functions that will be called in intervals (10 times per second) when the mouse stays over / hovers the spot element.
    onout
    • Actions / functions that will be called when the mouse moves out of the spot element.
    onclick
    • Actions / functions that will be called when there is a mouse click on the spot element.

<spot> Actions

Plugin Subnodes - <radar>

  • Add and style a radar.
  • The radar will be shown at the active spot position.

The <radar> node with all settings and their default values: 
<radar visible="true"
       dragable="true"
       size="100"
       zoomwithmap="false"
       alpha="0.5"
       fillcolor="0xFFFFFF"
       fillalpha="1.0"
       linewidth="0.0"
       linecolor="0xFFFFFF"
       linealpha="0.0"
       glow="true"
       glowcolor="0xFFFFFF"
       glowwidth="4"
       glowstrength="4"
       />

<radar> Attributes

Google Maps Controls

  • There are some standard Google Maps Controls available:
  • Note - beside of these included controls it's possible to use own images as controls by using normal krpano plugin elements and adding them with the parent setting to the map.

All controls with all settings and their default values:


Navigation Control: 
<navigationcontrol visible="true" align="lefttop" x="2" y="2" />

Position Control: 
<positioncontrol visible="true" align="lefttop" x="2" y="2" />

Zoom Control: 
<zoomcontrol visible="true" align="righttop" x="2" y="2" 
             hasscrolltrack="true"
             />

Map-Type Control: 
<maptypecontrol visible="true" align="rightbottom" x="2" y="2"
                buttonalign="H"
                />

Overview-Map Control: 
<overviewmapcontrol visible="true"
                    align="leftbottom"
                    x="2" y="2"
                    border="1" 
                    width="..." 
                    height="..."
                    />

Control Attributes

Plugin Actions

Actions of the Google Maps Plugin object.

Usage example: 
plugin[map].activatespot(spot1);
plugin[map].pantospot(spot1);

All actions:

Actions documenation:

Examples

Full example xml code: (also included in the viewer download package)
<krpano onstart="loadscene(stpeterssquare,null,MERGE);">

    <area width="70%" x="30%" />

    <plugin name="map" url="googlemaps.swf" parent="BGLAYER" keep="true"
            align="lefttop" x="0" y="0" width="30%" height="100%"
            key="...your Google Maps API key for your domain..."
            maptype="satellite"
            lat="41.90050" lng="12.46705" zoom="15"
            viewmode="3D" pitch="45.0" roll="0.0" yaw="-90.0"
    >

        <spotstyle name="DEFAULT"
                   url="mapspot.png"
                   overurl="mapspot_over.png"
                   activeurl="mapspot_active.png"
                   edge="bottom" x="0" y="0" shadow="true"
                   />

        <spot name="stpeterssquare" active="true"
              lat="41.90255" lng="12.45708" heading="64.5"
              onhover="showtext('St. Peters[sq]s Square');"
              onclick="loadscene(stpeterssquare,null,MERGE,BLEND(1));
                       activatespot();"
              />

        <spot name="fourrivers"
              lat="41.89877" lng="12.47311" heading="270.0"
              onhover="showtext('Fountain of the Four Rivers');"
              onclick="loadscene(fourrivers,null,MERGE,BLEND(1));
                       activatespot();"
              />

        <radar visible="true" zoomwithmap="true" size="50" />

        <navigationcontrol  visible="true" />
        <maptypecontrol     visible="true" buttonalign="V" />

    </plugin>

    <scene name="stpeterssquare">
        <view hlookat="103" vlookat="-2" fov="100" />
        <preview type="stpeterssquare_preview.jpg" />
        <image>
            <cube url="stpeterssquare_%s.jpg" />
        </image>
    </scene>

    <scene name="fourrivers">
        <view hlookat="-1" vlookat="-4" fov="100" />
        <preview type="fourrivers_preview.jpg" />
        <image>
            <cube url="fourrivers_%s.jpg" />
        </image>
    </scene>

</krpano>