ansaurus

Question

Answer 1

+2 A:

There are two common techniques to tackle this:

Generate 360 arrow icons, each rotated by 1 degree, and then call the relevant one according to the direction required. You may want to call the arrows something like "arrow_144.png".

If you do not require 1 degree precision, you may want to generate just 36 icons at 10 degree increments for example. Then simply use the icon that is closest to the nearest representation.
Use the HTML 5 canvas to rotate the icon by an arbitrary degree as in the following example by Mike Williams:
- Google Maps API Tutorial: Using <canvas> to rotate the icon

UPDATE:

You may want to check the example below on how to use the HTML 5 canvas element to rotate a marker. Simply change the angleDegrees variable as required.

Note that this example uses the ELabel extension by Mike Williams to display a custom HTML element on the map.

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Canvas Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false" type="text/javascript"></script> 
    <script src="http://econym.org.uk/gmap/elabel.js" type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    if (GBrowserIsCompatible()) {   
        var angleDegrees = 220;
        var map = new GMap2(document.getElementById("map"));
        var arrowIcon = new Image();

        var marker = new ELabel( new GLatLng(55.50, 2.50), 
                                 '<canvas id="arrowcanvas" width="32" height="32"><\/canvas>',
                                 null,
                                 new GSize(-16, 16));

        arrowIcon.src = "arrow.png";

        map.addOverlay(marker);

        map.setCenter(new GLatLng(53.85, -1.80), 5);

        var canvas = document.getElementById("arrowcanvas").getContext('2d');
        var angleRadians = (angleDegrees / 180) * Math.PI;

        var cosa = Math.cos(angleRadians);
        var sina = Math.sin(angleRadians);

        canvas.clearRect(0, 0, 32, 32);
        canvas.save();
        canvas.rotate(angleRadians);
        canvas.translate(16 * sina + 16 * cosa, 16 * cosa - 16 * sina);
        canvas.drawImage(arrowIcon, -16, -16);
        canvas.restore();
    }
    </script> 
  </body> 
</html>

The following is a screenshot from the above example:

Rotate Google Maps Marker with HTML 5 canvas

Daniel Vassallo 2010-02-17 09:14:36

i saw on this http://econym.org.uk/gmap/canvas.htm and i was wondering, how can i rotate an image to 144 or so degree, from using this code?

Basit 2010-02-17 11:14:36

@basit: Note that the HTML5 example will not work in Internet Explorer. There may be a workaround by using: http://code.google.com/p/explorercanvas/ in IE. Is this acceptable for you? Otherwise you may want to use the first option which works on all browsers.

Daniel Vassallo 2010-02-17 11:43:48

ya that is fine. we dont need to show for ie user and tell them they can't see it, because of ie

Basit 2010-02-17 12:15:15

@basit: I'll try to update my answer later today, with a simple example on how to rotate an icon on Google Maps with the canvas element.

Daniel Vassallo 2010-02-17 12:28:13

that will be great :).. please do put 360 degree example, so i can get idea on how to rotate to 144 degree :) thanks again

Basit 2010-02-17 13:00:13

@basit: Updated my answer with a basic example.

Daniel Vassallo 2010-02-18 15:40:23

i havent tried it, but really.. thank you for it.. i will try soon, if any problem comes, i will ask for help :). thanks again :)

Basit 2010-02-18 20:28:04

ansaurus

tags:

views:

answers:

Show wind direction on Google Maps

related questions