Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ol> <li>In order to show an arrow over a google map you can create a <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/examples/richmarker.html" rel="noreferrer">Rich Marker</a> that embed an image using the <a href="http://code.google.com/p/google-maps-utility-library-v3/" rel="noreferrer">google-maps-utility-library-v3</a>,</li> <li>Next apply a rotation in degree to the image element with css3 tranformations.</li> </ol> <p>In example :</p> <pre> <code> // 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 } ); </code> </pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload