Afficher la direction du vent sur Google Maps

Question

J'ai calculé la direction du vent et maintenant je veux montrer la direction du vent pointant à 144 degrés (sur la boussole). Comment puis-je afficher cette flèche sur Google Maps?

Answer 1

1. Afin de montrer une flèche sur une carte Google, vous pouvez créer un Rich Marker qui une image en utilisant intégrer la google-maps-utility-library-v3,
2. Appliquer ensuite une rotation en degrés à l'élément d'image avec CSS3 Transformations.

Dans l'exemple:

 

// 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 
    } 
);