sdk-google-map
Version:
Simple to use (Angular) embedded Google map.
136 lines (130 loc) • 7.01 kB
JavaScript
import * as i0 from '@angular/core';
import { ViewChild, Input, Component, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i1 from 'sdk-loading';
import { SDKLoadingModule } from 'sdk-loading';
class SDKGoogleMapComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.height = "";
this.width = "";
this.latitude = "";
this.longitude = "";
this.location = "";
this.zoom = "10";
this.border = "1px solid lightgray";
this.isLoading = false;
this._height = "";
this._width = "";
}
/**************************************************************************
* Component Lifecycle Methods
**************************************************************************/
ngOnChanges(_args) {
if (_args.latitude || _args.longitude || _args.location || _args.zoom) {
if (_args.latitude !== "" || _args.longitude !== "" || _args.location !== "") {
this.loadMap();
}
}
if ((_args.height && _args.height !== "") || (_args.width && _args.width !== "")) {
this.setMap();
}
}
/**************************************************************************
* Private Methods
**************************************************************************/
setMap() {
if (this.height !== "" && this.width === "") {
this._height = this.height;
this._width = this.height;
}
else if (this.height === "" && this.width !== "") {
this._height = this.width;
this._width = this.width;
}
else if (this.height !== "" && this.width !== "") {
this._height = this.height;
this._width = this.width;
}
else {
this._height = "300px";
this._width = "300px";
}
}
loadMap() {
this.isLoading = true;
let src = "";
if (this.latitude && this.latitude !== "" && this.longitude && this.longitude !== "") {
src = `<iframe id="sdk-google-map-iframe" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=100%25&hl=en&q=${this.latitude},${this.longitude}&t=&z=${this.zoom}&ie=UTF8&iwloc=B&output=embed"></iframe>`;
}
else if (this.location && this.location !== "") {
src = `<iframe id="sdk-google-map-iframe" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=100%25&hl=en&q=${encodeURI(this.location)}&t=&z=${this.zoom}&ie=UTF8&iwloc=B&output=embed"></iframe>`;
}
else {
src = `<div style="display: flex; width: 100%; height: 100%; align-items: center;"><div style="width: 100%; text-align: center;">Insufficient data.</div></div>`;
}
setTimeout(() => {
this.map.nativeElement.innerHTML = src ?? "";
let iframe = document.getElementById('sdk-google-map-iframe');
if (iframe) {
iframe.onload = () => {
this.isLoading = false;
};
}
else {
this.isLoading = false;
}
}, 100);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKGoogleMapComponent, isStandalone: true, selector: "sdk-google-map", inputs: { height: "height", width: "width", latitude: "latitude", longitude: "longitude", location: "location", zoom: "zoom", border: "border" }, viewQueries: [{ propertyName: "map", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style]=\"'position: relative; height: ' + _height + '; width: ' + _width + '; border: ' + border + ';'\">\n <div #map style=\"height: 100%; width: 100%;\"></div>\n <sdk-loading [isLoading]=\"isLoading\"></sdk-loading>\n</div>\n", dependencies: [{ kind: "ngmodule", type: SDKLoadingModule }, { kind: "component", type: i1.SDKLoadingComponent, selector: "sdk-loading", inputs: ["isLoading", "showEllipsis", "style"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-google-map', standalone: true, imports: [SDKLoadingModule], template: "<div [style]=\"'position: relative; height: ' + _height + '; width: ' + _width + '; border: ' + border + ';'\">\n <div #map style=\"height: 100%; width: 100%;\"></div>\n <sdk-loading [isLoading]=\"isLoading\"></sdk-loading>\n</div>\n" }]
}], propDecorators: { height: [{
type: Input
}], width: [{
type: Input
}], latitude: [{
type: Input
}], longitude: [{
type: Input
}], location: [{
type: Input
}], zoom: [{
type: Input
}], border: [{
type: Input
}], map: [{
type: ViewChild,
args: ["map"]
}] } });
class SDKGoogleMapModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapModule, imports: [SDKGoogleMapComponent], exports: [SDKGoogleMapComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapModule, imports: [SDKGoogleMapComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKGoogleMapModule, decorators: [{
type: NgModule,
args: [{
imports: [
SDKGoogleMapComponent
],
exports: [
SDKGoogleMapComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}]
}] });
/*
* Public API Surface of sdk-google-map
*/
/**
* Generated bundle index. Do not edit.
*/
export { SDKGoogleMapComponent, SDKGoogleMapModule };
//# sourceMappingURL=sdk-google-map.mjs.map