Show wind direction on Google Maps

Question

I calculated the wind direction and now I want to show the wind direction pointing to 144 degrees (on compass). How can I show this arrow on Google Maps?

Solution

1. In order to show an arrow over a google map you can create a Rich Marker that embed an image using the google-maps-utility-library-v3,
2. Next apply a rotation in degree to the image element with css3 tranformations.

In example :

// content element of a rich marker
var richMarkerContent    = document.createElement('div');

// arrow image
var arrowImage           = new Image();
arrowImage.src           = 'http://www.openclipart.org/image/250px/' +
                           'svg_to_png/Anonymous_Arrow_Down_Green.png';

// rotation in degree
var directionDeg         = 144 ;

// create a container for the arrow
var rotationElement      = document.createElement('div');
var rotationStyles       = 'display:block;' +
                           '-ms-transform:      rotate(%rotationdeg);' +
                           '-o-transform:       rotate(%rotationdeg);' +
                           '-moz-transform:     rotate(%rotationdeg);' +
                           '-webkit-transform:  rotate(%rotationdeg);' ;

// replace %rotation with the value of directionDeg
rotationStyles           = rotationStyles.split('%rotation').join(directionDeg);

rotationElement.setAttribute('style', rotationStyles);
rotationElement.setAttribute('alt',   'arrow');

// append image into the rotation container element
rotationElement.appendChild(arrowImage);

// append rotation container into the richMarker content element
richMarkerContent.appendChild(rotationElement);

// create a rich marker ("position" and "map" are google maps objects)
new RichMarker(
    {
        position    : position,
        map         : map,
        draggable   : false,
        flat        : true,
        anchor      : RichMarkerPosition.TOP_RIGHT,
        content     : richMarkerContent.innerHTML
    }
);

Comments

[Devin M]

Thanks Sébastien. I've been looking for a quick and easy way to rotate a marker and this is, by far, the best option for me. A second thank you for a working example.