Я использую карты Google в своем проекте. Я создал карту, но не могу передать широту и долготу из своего API, как я могу решить эту проблему.
Я получаю сообщение, как я показал на изображении я не хочу отображать это сообщение, но когда я нажимаю на него, я вижу всплывающее окно и некоторую информацию, как это можно сделать.
ТИП:
map_dev:any = []
getMapData(){
this.service.getmap_data().subscribe(response =>{
this.map_dev = response
})
}
@ViewChild("mapContainer", { static: false }) gmap: ElementRef;
map: google.maps.Map;
lat = 40.73061;
lng = -73.935242;
markers = [
{
position: new google.maps.LatLng(40.73061, 73.935242),
map: this.map,
title: "Marker 1"
},
{
position: new google.maps.LatLng(32.06485, 34.763226),
map: this.map,
title: "Marker 2"
}
];
//Coordinates to set the center of the map
coordinates = new google.maps.LatLng(this.lat, this.lng);
mapOptions: google.maps.MapOptions = {
center: this.coordinates,
zoom: 2,
streetViewControl:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Default Marker
marker = new google.maps.Marker({
position: this.coordinates,
map: this.map,
title: '<div class="info-window">'+
'<h3>Info Window Content</h3>'+
'<div class="info-content">'+
'<div>'+
'</div>'
});
ngAfterViewInit(): void {
this.mapInitializer();
}
mapInitializer(): void {
this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
//Adding Click event to default marker
this.marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content: this.marker.getTitle()
});
infoWindow.open(this.marker.getMap(), this.marker);
});
//Adding default marker to map
this.marker.setMap(this.map);
//Adding other markers
this.loadAllMarkers();
}
loadAllMarkers(): void {
this.markers.forEach(markerInfo => {
//Creating a new marker object
const marker = new google.maps.Marker({
...markerInfo
});
//creating a new info window with markers info
const infoWindow = new google.maps.InfoWindow({
content: marker.getTitle()
});
marker.addListener('mouseover', function() {
infoWindow.open(marker.getMap(), marker);
});
//Add click event to open info window on marker
marker.addListener("click", () => {
infoWindow.open(marker.getMap(), marker);
});
//Adding marker to google map
marker.setMap(this.map);
});
}