Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

What is the process for implementing rotation of the current position marker in angular/google-maps?

As an Ionic 6 project developer utilizing Angular 14, I have successfully integrated angular/google-maps into my project, and I have also been able to customize the markers in accordance with my needs. However, now I want to implement the blue dot current position marker similar to that of Google Maps. Although I was able to integrate the blue dot position by using watchPosition, I couldn't figure out how to implement the rotation similar to Google Maps. I attempted to look up and find a solution online, but I couldn't find anything useful regarding the current position, so I implemented it using watchPosition. Therefore, I would like to know if there's a way to add rotation of the current position marker with angular/google-maps. Please refer to this image for reference: enter image description here
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can use agm-overlay to rotate the icon. You can set the icon with "img src" and use inline css "style" to rotate the icon. Here is a working example on Stack Overflow that you can check out:. I hope this helps! Let me know if you have any other questions.

Sources

Rotate markers in angular-google-maps - Stack OverflowHow to smoothly move and rotate a marker in google map - OodlestechnologiesHow to rotate a marker in Google Maps? - Stack OverflowHow to add rotation of the current position marker in angular/google-maps?
avatar
Tolerim
a month ago
Unfortunately, I am not familiar with the angular/google-maps library and its implementation details. However, to add rotation to a marker in general using JavaScript and Google Maps API, you can use the rotation property. Here is an example of how you can rotate a marker: 
const marker = new google.maps.Marker({
  position: myLatLng,
  map,
  title: "My Marker",
  icon: {
    url: "path/to/marker.png",
    rotation: 45 // Specify the rotation value here
  }
});
In the above example, we have created a new marker and set the rotation property to 45 degrees. You can set the rotation value as per your requirements. To implement this in your specific use case with angular/google-maps, you might need to look into the API documentation of the library or seek help from the community.
;