0

Well, I am not new to google map, but not very much experienced in it.

I want to know how to put a CUSTOM ICON right on the middle of a polyline ?

For clarity I attached an image, where you can see RED TRIANGLE is my custom icon, that I want to place right in the middle. I want this triangle to be CLICKABLE that will open a popup etc where I will place some form etc.

Here is the image:

http://oi61.tinypic.com/amxhkh.jpg

Please Guide me / help me with code etc.

Best Wishes and Billion Thanks in Advance !

ZH.!

HashTeck
  • 36
  • 8
  • What does your code for the polyline look like? [related question that puts marker at percentage of the distance along a polyline](http://stackoverflow.com/questions/19128954/latlng-from-polyline-percentage/19129543#19129543) – geocodezip Jul 31 '14 at 21:50

2 Answers2

1

A more simple way is set the symbol icon offset to 50%:

var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

var poly = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 0.5,
icons: [{
icon: lineSymbol,
offset: '50%'
}],
...
});
Gfuentes
  • 113
  • 1
  • 1
  • 8
0

The method google.maps.geometry.spherical.computeLength() gives you the complete length of a polyline-path.

Based on this length walk through the path and use a little bit Math to find the middle(to get the distance between 2 points use computeDistanceBetween()).

Note: the geometry-library isn't loaded by default, see: https://developers.google.com/maps/documentation/javascript/libraries

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201