UNPKG

sdk-google-map

Version:

Simple to use (Angular) embedded Google map.

68 lines (53 loc) 2.32 kB
<img src="https://www.soodohkohd.com/assets/images/logo.png" title="soo-doh-kohd" height="200"/> ## Description: The sdk-google-map component is a simple to use component that allows you to embed a Google Maps view without the need of any API keys. By providing either Lat/Long coordinates, or an address, you can dynamically display maps in your application. ## Angular Compatibility Chart | Version | Compatibility | |---------|---------------| | >= 16 | ✔ | ## INSTALLATION: Using NPM: ```bash npm install --save sdk-google-map ``` ## CONFIGURATION: To configure the ```sdk-google-map``` for your application, add the following lines to your app.module.ts file: ```typescript import { SDKGoogleMapModule } from 'sdk-google-map'; @NgModule({ imports: [ SDKGoogleMapModule ] }) export class AppModule { } ``` ## PROPERTIES: ```typescript height: string = ""; // This value should include a size type (e.g., '500px'); width: string = ""; // This value should include a size type (e.g., '500px'); latitude: string = ""; // Example: "37.422161" longitude: string = ""; // Example: "-122.084267" location: string = ""; // Example: "1600 Amphitheatre Parkway Mountain View, CA 94043" zoom: string = "10"; // Default value shown. border: string = "1px solid lightgray"; // Default value shown. Use 'unset' to remove the border. ``` ## USAGE: ```html <sdk-google-map location="1600 Amphitheatre Parkway Mountain View, CA 94043, USA"></sdk-google-map> <sdk-google-map latitude="37.422161" longitude="-122.084267"></sdk-google-map> ``` Setting the zoom, height, width and border: ```html <sdk-google-map location="1600 Amphitheatre Parkway Mountain View, CA 94043, USA" height="500px" width="750px" zoom="12" border="1px solid blue"></sdk-google-map> ``` Dynamic variables: ```typescript public mapLatitude: string = "37.422161"; public mapLongitude: string = "-122.084267"; public mapLocation: string = "1600 Amphitheatre Parkway Mountain View, CA 94043"; ``` ```html <sdk-google-map [latitude]="mapLatitude" [longitude]="mapLongitude" height="500px" width="750px" zoom="12"></sdk-google-map> <sdk-google-map [location]="mapLocation" height="500px" width="750px" zoom="12"></sdk-google-map> ``` **NOTE:** Latitude/Longitude will be used in lieu of Location, if all 3 are provided.