Options
All
  • Public
  • Public/Protected
  • All
Menu

Class GoogleMapsComponent

The Google Maps component allows you to show a map in your Project that is powered by Google Maps. You can show routes and markers on the map.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Google Map Demo', googleMapDemo)
.addParameter('Map', uActions.ParamType.GOOGLE_MAP)
.register();
function googleMapDemo(comp) {
    var mapComp = uComps.cast.toGoogleMaps(comp);
    mapComp.latitude = -41.278379;
    mapComp.longitude = 174.776914;
    mapComp.showMarker = true;
    mapComp.markerTitle = 'City Foodmarket';
    mapComp.markerDescription = 'An indoor market to purchase food, with places to sit and eat.';
    mapComp.markerImage = 'company_logo_small.jpg';
}

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

alpha

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

clippingType

clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components

components: ComponentList

Access this Component's sub-components.

formEnabled

formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height

height: number

The height of the Component.

latitude

latitude: number

The initial latitude that the map will be centered on.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.latitude = -41.278379;

longitude

longitude: number

The initial longitude that the map will be centered on.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.longitude = 174.776914;

markerDescription

markerDescription: string

A description added to the default marker.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.markerDescription = 'An indoor market to purchase food, with places to sit and eat.';

markerImage

markerImage: string

The image to use for the default marker. If no image is supplied a default will be used.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.markerImage = 'company_logo_small.jpg';

markerTitle

markerTitle: string

The title of the default marker.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.markerTitle = 'City Foodmarket';

mask

mask: RectangleComponent | CircleComponent

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

name

name: string

Name of the component.

parent

parent: Component

Access this Component's parent component.

passedFormValidation

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

routeLineColor

routeLineColor: string

The color of the route line.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.routeLineColor = '#C68E33';

routeLineWeight

routeLineWeight: number

The thickness of the route line in device points. Range 1 to 20. Default is 7.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.routeLineWeight = 10;

showMarker

showMarker: boolean

When true, a marker will be shown at the initial location, defined by latitude and longitude when the map appears.

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.showMarker = true;

type

type: string

Type of the component.

uniqueId

uniqueId: string

Unique ID of the component.

visible

visible: boolean

Whether or not the Component is visible.

width

width: number

The width of the Component.

x

x: number

The x position of the Component relative to its parent.

y

y: number

The y position of the Component relative to its parent.

zoomLevel

zoomLevel: ZoomLevel

The initial zoom level to display. uComps.ZoomLevel: STREET, CITY, REGION, NATION

var mapComp = uComps.cast.toGoogleMaps(comp);
mapComp.longitude = uComps.ZoomLevel.CITY;

Methods

addMapMarkerLatLong

  • addMapMarkerLatLong(latitude: number, longitude: number, title: string, description: string, image: string, zoomToMarker: boolean, showInfo: boolean): void

  • Adds a map marker to a specific location defined by the latitude and longitude.

    Parameters

    • latitude: number

      position for the map to display.

    • longitude: number

      position for the map to display.

    • title: string

      title of the map marker.

    • description: string

      description of the map marker.

    • image: string

      custom image for the map marker.

    • zoomToMarker: boolean

      whether to zoom to the marker or not.

    • showInfo: boolean

      whether to show extra information or not.

      var mapComp = uComps.cast.toGoogleMaps(comp);
      mapComp.addMapMarkerLatLong(-43.5309385, 172.6338719, 'Central Christchurch', 'Come and visit Christchurch, a beautiful city in the South Island of New Zealand.', 'chch_logo.png',false,false)

    Returns void

addMapRouteAddress

  • addMapRouteAddress(startAddress: string, endAddress: string, zoomToMarker: number, routeType: number, showInfo: boolean): void

  • Adds a route between two routes in blue, and optionally zooms to the route.

    Parameters

    • startAddress: string
    • endAddress: string
    • zoomToMarker: number
    • routeType: number
    • showInfo: boolean

    Returns void

emit

  • emit(eventType: string, data: Object): void

  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

focus

  • focus(): void

  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
        .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
        .register();
    function setFocus(textEntry) {
        textEntry.focus();
    }

    Returns void

get

  • get(propertyName: string): any

  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
        var text1=uPages.current.components.getText('Text 1');
        console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

on

  • on(eventType: string, callback: Function): void

  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

refresh

  • refresh(): void

  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

set

  • set(propertyName: string, value: any): void
  • set(data: Object): void

  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
        uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

showLatLong

  • showLatLong(latitude: number, longitude: number, zoomLevel: number): void

  • Show the map at the location defined by the latitude and longitude.

    Parameters

    • latitude: number

      position for the map to display.

    • longitude: number

      position for the map to display.

    • zoomLevel: number

      number to define zoom level. Range 1 to 25.

      var mapComp = uComps.cast.toGoogleMaps(comp);
      mapComp.showLatLong(-43.5309385, 172.6338719, 13)

    Returns void

tween

  • tween(seconds: number, params: Object, type?: TweenType): void

  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void