Rotating Image/Marker Image on Google Map V3

Rotating image / marker image on Google map V3

I have done the rotation in v3 with the following code:

<canvas id="carcanvas" width="1" height="1"></canvas>

    if (document.getElementById('carcanvas').getContext) {
        var supportsCanvas = true;
    } else {
        var supportsCanvas = false;
    }

    var rImg = new Image();
    rImg.src='/images/cariconl.png';

    // Returns the bearing in radians between two points.
    function bearing( from, to ) {
        // Convert to radians.
        var lat1 = from.latRadians();
        var lon1 = from.lngRadians();
        var lat2 = to.latRadians();
        var lon2 = to.lngRadians();
        // Compute the angle.
        var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
        if ( angle < 0.0 )
            angle  += Math.PI * 2.0;
        if (angle == 0) {angle=1.5;}
        return angle;
    }

    function plotcar() {
        canvas = document.getElementById("carcanvas").getContext('2d');
        var cosa = Math.cos(angle);
        var sina = Math.sin(angle);
        canvas.clearRect(0,0,32,32);
        canvas.save();
        canvas.rotate(angle);
        canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
        canvas.drawImage(rImg,-16,-16);
        canvas.restore();
    }

and in the animation method :

if (supportsCanvas) {
                    angle = bearing(new google.maps.LatLng(lat1, lng1),new google.maps.LatLng(lat2, lng2));
                    plotcar();
                }

I hope that help.

Rotating marker in Google Maps Javascript API V3

Since it is really hard to predict the future, if you don't have a real time heading from the GPS device, use the previous point and the updated point. That won't be particularly accurate if it isn't moving (or isn't moving fast enough).

function updateMarker(marker, latitude, longitude, label) {
  var prevPosn = marker.getPosition();
  marker.setPosition(
    new google.maps.LatLng(
      latitude,
      longitude
    )
  );
  marker.setIcon({
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    strokeColor: 'red',
    strokeWeight: 3,
    scale: 6,
    rotation: google.maps.geometry.spherical.computeHeading(prevPosn, marker.getPosition())
  })
  if (label) {
    marker.setTitle(label);
  }
}

How to rotate google maps marker?

rotation is not a property of the Icon Interface, it is only valid for the SVG Symbol Interface.

Either use an SVG Symbol for your icon or to rotate an image (jpeg, png, gif) use CSS (Related question: rotate a .gif image on google maps api v3?)

How to rotate a marker in Google Maps?

The API reference doesn't say anything specifically about how rotation is accomplished but since path takes an SVG-element I'd say thats how they manage to rotate it. If you create your custom marker using SVG it can be done quite easily using transform="rotate(deg centerX centerY").

---

Related Topics