All geek questions in one place

Rotate marker on google maps

I used Show the wind direction on Google Maps to rotate the marker on the Google map, but there is an angle of degrees equal to 220. Now I have one text input field where the user enters the angle and when the button click shows the rotated marker on the google map. How can I edit this code to get values ​​from a text box? Is this possible with <canvas> ?

The 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>

+4
source share
1 answer

You can copy its code and replace this line:

 var angleDegrees = 220;

With something like:

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

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

+4
source

Source: https://habr.com/ru/post/1412165/

More articles:


All Articles