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