Menu
I need a way to customize the map marker in Angular 2 with agm map. In a vehicle tracking application I have to display the vehicle status at present via agm-marker in live tracking component. I need to display the marker in three different colors (say green for running red for stopped and yellow for idle) and also I need to show the way of direction the vehicle travelling at present.
I searched many places, but found only icons which can be added to the marker and I added icon using iconUrl like,
<agm-map>
<agm-marker class="mapMarker" *ngFor="let device of devices;" [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name">
</agm-marker>
</agm-map>
And my output is like,
As this looks more awkward, kindly help me to display HTML, in place of that icon on the marker.
I am in the need of output exactly like in the below image(Marker along with html label showing that particular vehicle number).
299
//Create an HTML marker and add it to the map. var marker = new atlas. HtmlMarker({ color: 'DodgerBlue', text: '10', position: [0, 0], popup: new atlas.
Angular Google Maps (short name: AGM) gets shipped via the Node Package Manager (NPM). Run the following command to add it to your new project: npm install @agm/core.
I don't know agm and angular, but with the standard tools Html/js you can do it relative simple.
1.) Get 2 coordinates from the vehicle in driving directory. Then use the possibility to show an arrow along a path, so 2.) Set up a path (from the given coords) with an arrow, and hide the path so only the arrow is visible. 3.) Set up a marker with label indirect (with offset) to the first coord and don't display the marker.
Attached an example for one vehicle. Perhaps you can use that or parts of it. Good luck , Reinhard
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
#map {height: 100%;}
html, body {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 18.1, lng: 79.1},
mapTypeId: 'terrain'
});
///// Simple example for one vehicle //////
//define the arrow you will display
var arrowGreen = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
fillColor: 'green',
fillOpacity: 0.8,
};
//set two points in driving direction of vehicle
var dirCoordinates = [
{lat: 18.0935, lng: 79.0741},
{lat: 18.0936, lng: 79.0742},
];
//define a poly with arrow icon (which is displayed in driving directory)
var poly = new google.maps.Polyline({
path: dirCoordinates,
strokeColor: 'green',
strokeOpacity: 0,
strokeWeight: 6,
map: map
});
poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]});
//set the text as marker label without displayinge the marker
var m = new google.maps.Marker({
position: new google.maps.LatLng(dirCoordinates[0]),
label: {
color: 'black',
fontWeight: 'bold',
text: 'TN28 AF 1416',
},
icon: {
url: 'none_marker.png',
anchor: new google.maps.Point(10, -25),
},
map: map
});
//.....
// ..more vehicles
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>Once I have tried to change marker style, after data bind to the map. But it did not allowed by agm. Anyway following solution successed for me. As I believe your data service may be able to identify the direction of vehicle.
So You need to have the following kind of a JSON data object array for generate marker list.
[
{
"latitude": 51.5238224,
"longitude": -0.2485759,
"markerUrl": "/assets/images/Map/20-red-icon.svg"
},
{
"latitude": 51.238224,
"longitude": -0.2485759,
"markerUrl": "/assets/images/Map/30-green-icon.svg"
},
,
{
"latitude": 51.4238224,
"longitude": -0.2485759,
"markerUrl": "/assets/images/Map/30-yellow-icon.svg"
}
]
You should have multiple icons which can identify direction of a vehicle and it's status.
Ex:
like this, you must have a list of icons for each vehicle status and direction. Marker Url must dicide by the data which you are getting from the sevice.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
