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.

INSTALLATION:

Using NPM:

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:

import { SDKGoogleMapModule } from 'sdk-google-map';

@NgModule({
    imports: [
        SDKGoogleMapModule
    ]
})
export class AppModule { }

PROPERTIES:

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:

<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:

<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:

public mapLatitude: string = "37.422161";
public mapLongitude: string = "-122.084267";
public mapLocation: string = "1600 Amphitheatre Parkway Mountain View, CA 94043";

<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.