Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular component for GMap and google maps
import { Component, Input, OnInit } from '@angular/core';
import { Location } from '../models/location';
import { AppConfigService } from '../services/app-config.service';
import { MessageBrokerService } from '../services/message-broker.service';
import { NewMarkerFromMapMessage } from '../messages/new-marker-from-map.message';
declare var google: any;
@Component({
selector: 'app-map',
templateUrl: './map.component.html'
})
export class MapComponent implements OnInit {
options: any;
overlays: any;
map: any;
readonly defaultPosition = { lat: 51.477847, lng: 0.0 };
readonly defaultZoom = 15;
@Input('location')
set value(loc: Location) {
if (loc && this.map) {
// Work with the google map object directly as modifying gmap's options
// will not update the map
this.map.setCenter({ lat: loc.Latitude, lng: loc.Longitude });
this.overlays = [
new google.maps.Marker({ position: { lat: loc.Latitude, lng: loc.Longitude }, title: loc.Name })
];
}
}
constructor(private readonly appConfigService: AppConfigService,
private readonly messageBroker: MessageBrokerService) {
}
onMapReady(event: any) {
if (event.map) {
this.map = event.map;
}
}
handleMapClick(event) {
this.messageBroker.sendMessage(new NewMarkerFromMapMessage(event.latLng.lat(), event.latLng.lng()));
}
ngOnInit() {
this.options = {
center: this.defaultPosition,
zoom: this.defaultZoom
};
}
get useMap(): boolean {
return this.appConfigService.useMap;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.