rotate marker on google maps

Question

I used this Show wind direction on Google Maps to rotate marker on google map, but there is angle degrees set to 220. Now I have one input text box, where the user enters the angle and when clik on button show rotated marker on google map. How can i edit this code to get values from text box? Is that possible with <canvas>?

Code is here:

<body onload="xz()" onunload="GUnload()">

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

<script type="text/javascript"> 

function xz()
{

if (GBrowserIsCompatible()) {   
    var angleDegrees = document.getElementById('angle').value;
    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 = "http://i49.tinypic.com/mafqee.png";

    map.addOverlay(marker);

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

    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>

<form> 
    <input type="text" size="13" id="angle" name="angle" value=""> </input>

    <input type="submit" id="button2" value="Prika?i" class="btnsearch" onsubmit="xz(); return false;">


</form> 
 </body>

Can you please specify what errors/problems you are having at this point? — Nathan Taylor, May 12 '12 at 18:39
when start this and enter the angle only what I get is loaded google map. When set angleDegrees to some value in code then I get marker on google map. I have no idea what the problem is — Josip, May 12 '12 at 19:51

Nathan Taylor · Accepted Answer · 2012-05-12T17:49:32.257

4

You can copy his code and replace this line:

var angleDegrees = 220;

With something like:

var angleDegrees = document.getElementById('myTextbox').value;

Where 'myTextbox' is the ID assigned to your input field.

edited May 12 '12 at 17:49

answered May 12 '12 at 16:54

Nathan Taylor

24,423
19
99
156

@Josip I typoed 'angleDegrees' as 'angleDegress' initially, make sure you use the right spelling. If that doesn't work, please update your question with the code you're using. – Nathan Taylor May 12 '12 at 17:50

rotate marker on google maps

1 Answers1