Android Google maps custom image according to direction

Question

Is it possible to add custom image according to direction between two markers ? I mean I want like this:

That red arrows custom image and their direction according to marker direction. Is it possible ?

Answer 1

Here's an example (of what you can do with PHP; it appears Google does not provide the possibility of directly rotating a marker)

I took this image, and downloaded it as 15722.png: http://cdn-img.easyicon.net/png/157/15722.png (an arrow pointing to the right)

index.php

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<script type="text/javascript">
  function initialize() {
    var map;
    var position = new google.maps.LatLng(50.84499325563654,4.349978498661017);    // set your own default location.
    var marker;   // a normal marker.
    var markers;  // All of these markers will point to var marker

    var locationToPointAt = new google.maps.LatLng(50.84499325563654,4.349978498661017);  // Manneken Pis
    var locations = [
      new google.maps.LatLng(50.84499325563654,4.359978498661017),  // east of the marker
      new google.maps.LatLng(50.84499325563654,4.339978498661017),  // west of the marker
      new google.maps.LatLng(50.85499325563654,4.349978498661017),  // North of the marker
      new google.maps.LatLng(50.8957080950929,4.334064952575659),   // Football stadion
      new google.maps.LatLng(50.82302545625156,4.39255052014533),   // VUB campus
      new google.maps.LatLng(50.896328544032805,4.48250108166883)   // Brussels Airport
    ];
    var myOptions = {
      zoom: 11,
      center: position
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    marker = new google.maps.Marker({
      position: locationToPointAt,
      map: map
    });
    var heading;
    var marker; 
    //  let's set the markers and calculate their heading to Manneken Pis
    for (var i=0; i< locations.length; i++) {
      heading = google.maps.geometry.spherical.computeHeading(locations[i], locationToPointAt);
      //heading = google.maps.geometry.spherical.computeHeading(locationToPointAt, locations[i]);
      marker = new google.maps.Marker({
        icon: rotatedIcon(heading),
        position: locations[i],
        map: map
      });
    }

    /**
    *  The icon is found here: 'http://cdn-img.easyicon.net/png/157/15722.png', // make or find your own arrow
    *  I downloaded it and saved it as '15722.png'
    *  This calculation works for an arow pointing to the right (that's what the 90 is doing).  
    *  You will have to recalculate this if the arrow points any other direction
    */
    function rotatedIcon(heading) {
      var rotation = Math.floor(90 - heading);
      return {
        url: 'image.php?r=' + rotation
      };
    }

  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
  width: 500px;
  height: 400px;
}
</style>
<div id="map-canvas"></div>

image.php

<?php
// @file: creates a rotated arrow. The rotation is $_GET['r'] (default 0).
$degrees = isset($_GET['r']) ? (int) $_GET['r'] : 0;
$filename = '15722.png'; // found at 'http://cdn-img.easyicon.net/png/157/15722.png', downloaded as '15722.png' in the same folder as this file

// @see http://php.net/manual/en/function.imagerotate.php , in the user comments
$source = imagecreatefrompng($filename);
imagealphablending($source, false);
imagesavealpha($source, true);

$rotation = imagerotate($source, $degrees, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($rotation, false);
imagesavealpha($rotation, true);

header('Content-type: image/png');
imagepng($rotation);
imagedestroy($source);
imagedestroy($rotation);
?>