webdevlog

Bloc de notas sobre desarrollo web, GNU/Linux, programación en general, y más.
marzo 27, 2020

How to rotate a marker with Google Maps API

Google Maps API let us personalize a map in a number of ways but what if we want to rotate a marker? This isn’t intuitive as it could be. To rotate a marker the API doesn’t have a property or method, we need to circunvent this limitation using CSS3, specifically the “transform” property.

If we use Leaflet we know that we have an easier way to do this, first we import a plugin called Leaflet Rotated Marker (https://github.com/bbecquet/Leaflet.RotatedMarker), and then we add the property “rotationAngle” to our marker like the next example:

L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);

Coming back to Google Map API, like we said before, using CSS3 will do the job. After the maps is loaded, we can execute a JavaScript code that select the marker and apply the transform property.

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
$.each(markers, function (i, m) {
$('img[src="myIcon.png"]').css({ 'transform': 'rotate(' + (90) + 'deg)' });
});
});

The example before will rotate the marker to 90 degrees when Google Maps is loaded hence the use of “tilesloaded” listener.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *