Hello DaniWeb Community,

I have a question about changing the symbol of my tracker.

I am using google.maps.SymbolPath.CIRCLE

Can I change this to a image of mine? jpeg / png file

If yes, How I can do it?

Thank you and God Bless

-Tap

Hello Sir stultuske,

currently I'm using .FORWARD_CLOSED_ARROW as my ICON

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>

var track;
var stepDisplay

var myCenter=new google.maps.LatLng(this is my coordinates);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.TERRAIN
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);


var trackCoordinates = [
    {lat:7.0 , lng:129.0},
    {lat:8.0 , lng:123.0},
    {lat:8.5 , lng:118.0},
    {lat:7.0 , lng:109.0},

];

stepDisplay = new google.maps.InfoWindow();

var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 10,
    strokeColor: '#2162a3'
  };

    trackPath = new google.maps.Polyline({
    path: trackCoordinates,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight:2,
    map:map
});
animateCircle();
trackPath.setMap(map);

}

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = trackPath.get('icons');
      icons[0].offset = (count / 2) + '%';
      trackPath.set('icons', icons);
      radius: Math.trackPath * 200
  }, 30);
}


google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:1000px;height:650px;"></div>
</body>
</html>

maybe a marker will be cool, so it will be look like a active GPS.

but if it can be an image file that would be awesome.

This article has been dead for over six months. Start a new discussion instead.