Google Maps Plugin googlemaps.js

• The Google Maps Plugin adds an interactive 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.
• And it's possible to control the whole maps and spots dynamically, e.g. pan/zoom around on the map, add or remove spots...
• Google Maps / Bing Maps Notes - the XML interfaces of the Bing Maps and the Google Maps plugins are almost the same. Just replace the plugin files.

• Buy / Order
• Usage Syntax
• Plugin Attributes
• Plugin Subnodes:
  • Spotstyle
  • Spot
  • Radar
• Plugin Actions
• Examples

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.
• The plugin can be bought here on this page or on the krpano Buy page.

Usage Syntax

<plugin name="map" devices="html5"
        url="googlemaps.js"
        align="leftbottom" width="400" height="300" x="0" y="0"
        keep="true"
        key=""
        maptype="satellite"
        language=""
        lat="..."
        lng="..."
        zoom="1"
        tilt="0"
        heading="0"
        controls="zoom|maptype"
        poi="false"
        activespotenabled="false"
        bgcolor="0x000000" bgalpha="0.0"
        onmapready=""
        onmaptypechanged=""
        onmapmoved=""
        onmapzoomed=""
>
  <spotstyle name="style1" ... />
  ...
  
  <spot name="spot1" ... active="true" />
  <spot name="spot2" ... />
  <spot name="spot3" ... />
  ...
  
  <radar visible="true" ... />
</plugin>

Plugin Attributes

• key
  • Enter here your Google Maps API key.
  • See here for how to get a key:
    https://developers.google.com/maps/documentation/javascript/get-api-key
• maptype
  • Select the type of the map:
    • satellite (default)
    • normal
    • hybrid
• language
  • Select a custom language for the map labels.
  • For the supported language codes please see here:
    • https://spreadsheets.google.com/spreadsheet/pub?key=0Ah0xU81penP1cDlwZHdzYWkyaERNc0xrWHNvTTA1S1E&gid=1
  • Note - The language setting need to be set already at startup of the plugin, changing it later is not possible!
• 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 or Bing Maps pages.
    • Or from here: Google Maps Get Lat Lon or Bing Maps Lat/Long Finder.
      Two nices pages which allow getting the coordinates in the right format in an easy and simple way. Note - the Google Maps and Bing Maps coordinates are compatible.
• zoom
  • Set zoom level of the map.
  • Can be from 1 to 25.
• tilt
  • Set the tilt level of the map.
  • More information here.
  • Can be 0 (not-tilted) or 45, default=0.
• heading
  • Set the heading of the tilted map.
  • Can be from 0 to 360, default=0.
• controls
  • Select which default controls should appear on the map.
  • Available options (can be combined by a | character):
    • zoom - zoom control
    • maptype - map type selection control
    • scale - show map scale
    • streetview - street-view control
    • rotate - rotate control
• poi
  • Show points of interest on the map.
  • True or false, default=false.
• activespotenabled
  • Should the active spot be enabeld?
    That means - should the active spot react to click or over events.
  • True or false, default=false.
• bgcolor / bgalpha
  • The color and alpha of the map background.
• mapsapi
  • Set manually a different url of the Google Maps API.
  • The full url, including the protocol would need to be set.
  • When not set, the default url:
    • http://maps.google.com for HTTP or
    • https://maps.google.com for HTTPS
    will be used.
  • Usage example - when the default Google Maps urls are blocked, the alternative url http://ditu.google.cn could be used.
• gmAPI
  • An object that provides access to the internal Google Maps API.
  • This object will be only accessible via Javascript.
  • This object will be first available after the onmapready event.
  • Object structure:
    • gmaps - the Google Maps API google.maps object
    • map - the Google Maps API Map object
    • dom - the dom element where the map is embedded

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 spotstyle attribute.
• There is a predefined style named "DEFAULT".

<spotstyle name="DEFAULT"
           url=""
           overurl=""
           activeurl=""
           edge="center"
           x="0"
           y="0"
           scale="1.0"
           />

<spotstyle> Attributes

• name
  • The name of the spotstyle.
    Use this name in the spotstyle 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.
• scale
  • Scaling for the spotstyle images.
  • Can be used to use higher resolution (2x scaled) images for the iPad 3 retina screen. Use the bigger image and scale="0.5" to get a 1:1 display of the image on the iPad 3.

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.

<spot name="..."
      spotstyle="DEFAULT"
      url="..."
      lat="..."
      lng="..."
      heading="0"
      active="false"
      onover=""
      onhover=""
      onout=""
      onclick=""
      />

<spot> Attributes

• name
  • The name of the current spot (see the xml name notes).
• spotstyle
  • 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 or Bing Maps pages.
    • Or from here: Google Maps Get Lat Lon or Bing Maps Lat/Long Finder.
      Two nices pages which allow getting the coordinates in the right format in an easy and simple way. Note - the Google Maps and Bing Maps coordinates are compatible.
• heading
  • The heading of the pano in degrees, needed to align the pano orientation with the radar on the map.
  • See also the radar headingoffset setting for details.
• 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 (several 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

• activatespot()
  • Activate the current spot.
• pantospot()
  • Pan the map center to the current spot.
• getstagepos(xvar,yvar) (Flash only)
  • Saves the current position of the spot on the flash stage to the given krpano variables.

Plugin Subnodes - <radar>

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

<radar visible="true"
       dragable="true"
       size="100"
       zoomwithmap="false"
       headingoffset="90"
       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

• visible
  • Show or hide the radar.
• dragable
  • Should the radar cone be dragable by the mouse?
• size
  • The size / range of the radar cone.
• zoomwithmap
  • Should the radar cone also be zoomed when zooming the map?
• headingoffset
  • An offset for the heading value of the spots.
  • The default value for headingoffset is 90, which means heading=0 is pointing to right/east by default. Use headingoffset=0 to let heading=0 pointing to top/north.
• alpha
  • The alpha transparency of the whole radar element.
• fillcolor / fillalpha
  • The color and alpha of the filling of the radar cone.
• linewidth / linecolor / linealpha
  • The linewidth, color and alpha of the line around the radar cone.
• glow / glowcolor / glowwidth / glowstrength (Flash only)
  • Add and style the glowwing effect of the radar cone.

Plugin Actions

plugin[map].activatespot(spot1);
plugin[map].pantospot(spot1);