Issue
I have a Microsoft SQL Server database with customers data:
Name,
City,
Details,
Latitude
Longitude
And I have an Angular application with Google Maps API implemented.
I want to add markers directly from the database to my map. How can I do that?
Solution
First of all you need an web API to return list or array of Latitudes nd Longitudes. Next step is, in angular you have to install @angular/google-maps
npm i @angular/google-maps
After that, you can write the code below in ts file after get data from API:
apiResult.forEach(item => {
this.markers.push(new google.maps.Marker({
position: {
lat: item.Latitude,
lng: item.Longitude
},
draggable: false,
label: item.Name
}));
});
Finally, you should add the code below in HTML.
<google-map [zoom]="markerZoom" height="400px" width="100%" [center]="markerCenter">
<map-marker #markerElem="mapMarker" *ngFor="let marker of markers" [label]="marker.label"
[position]="marker.position" [options]="marker">
</map-marker>
<map-info-window *ngFor="let marker of markers" [position]="marker.position">Hello Google Maps
</map-info-window>
</google-map>
Answered By - Amin Kamalinia
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.