import GoogleMapModel from '@orloxx/ui-core/src/views/google-map/google-map.model.js'

public class | source

GoogleMapModel

Controls communication and handling of the Google Maps JavaScript API

Example:

const googleMap = new GoogleMapModel(
  'your-google-api-key',
  document.getElementById('some-map'),
  { center: { lat: 10.4657, lng: -66.8796 }, zoom: 12 }
);

Static Member Summary

Static Public Members
public static get	INIT_CALLBACK: String: string The callback name attached to the Google's script library
public static get	READY_CALLBACK: String: string The callback name triggered when the Google's script library is called

Constructor Summary

Public Constructor
public	constructor(apiKey: String, $el: Element, options: google~MapOptions) Initialises the map using Google Maps JavaScript API

Member Summary

Public Members
public	$el: Element The element where the map will be rendered
public	apiKey: String Google's API key
public	map: google~Map The map instance from Google Maps JavaScript API
public	options: google~MapOptions Google Maps options

Method Summary

Public Methods
public	addListener(name: String, callback: Function) Adds map listener
public	initGoogleMap(): Promise<google~Map> Initialises the Google Maps JavaScript library and safely calls renderMap
public	renderMap(): google~Map Renders the map in the chosen $el

Static Public Members

public static get INIT_CALLBACK: String: string source

The callback name attached to the Google's script library

Return:

String

public static get READY_CALLBACK: String: string source

The callback name triggered when the Google's script library is called

Return:

String

Public Constructors

public constructor(apiKey: String, $el: Element, options: google~MapOptions) source

Initialises the map using Google Maps JavaScript API

Params:

Name	Type	Attribute	Description
apiKey	String		Google provides this in their console
$el	Element		The element where the map will be rendered
options	google~MapOptions		Google Maps options

Public Members

public $el: Element source

The element where the map will be rendered

public apiKey: String source

Google's API key

public map: google~Map source

The map instance from Google Maps JavaScript API

public options: google~MapOptions source

Google Maps options

Public Methods

public addListener(name: String, callback: Function) source

Adds map listener

Params:

Name	Type	Attribute	Description
name	String		The event name
callback	Function		The event callback function

See:

https://developers.google.com/maps/documentation/javascript/events

public initGoogleMap(): Promise<google~Map> source

Initialises the Google Maps JavaScript library and safely calls renderMap

There are three ways this can go down:

It's the first map added to the page and the script library has not been included yet
The library was included and INIT_CALLBACK already triggered
The library was included but it has not initialised yet

Return:

Promise<google~Map>

public renderMap(): google~Map source

Renders the map in the chosen $el

Return:

google~Map