Adding direction arrows to polylines...

4,818 views
Skip to first unread message

Mapper99

unread,
May 30, 2012, 2:26:14 AM5/30/12
to google-map...@googlegroups.com
I am using some wonderful code to draw arrow on line segments thanks to this code from Bill Chadwick:


The problem is I need to call the function twice for the arrows to appear.  The first time I call the code I get this error:

this.prj is undefined
var p1 = this.prj.fromLatLngToContainerPixel(this.points[0]);//first point

This is the code I am using to call the function:

var connectTheDots = [
marker1.getPosition(),
marker2.getPosition(), 
marker3.getPosition(),
];

var poly1 = new BDCCArrowedPolyline(connectTheDots,"blue",4,0.3,null,30,7,"#0000FF",2,0.5);

Any idea why this code fails the first time?  this.points[0] indeed is a valid object.

Thanks in advance,

Mapper99

geoco...@gmail.com

unread,
May 30, 2012, 8:08:16 AM5/30/12
to Google Maps JavaScript API v3
The v3 API is event driven.

Has the projection been initialized the first time it is used? You
may have to wait for an event that tells you it has been initialized
before using it.

From the documentation:
getProjection()
Projection
Returns the current Projection.
If the map is not yet initialized (i.e. the mapType is still null)
then the result is null. Listen to projection_changed and check its
value to ensure it is not null.

-- Larry
>
> Thanks in advance,
>
> Mapper99

Mapper99

unread,
May 30, 2012, 10:30:06 PM5/30/12
to google-map...@googlegroups.com
Hmmm..I did listen to the map projection event and indeed it is defined.  The code that is failing I think has to do with the point...

I uploaded a sample here:


You need to click on each of the icons on the right of the map 
then click the done button at the very bottom of the page 
Click done once, error occurs.  Click done again, and all is well 

Very strange!

geoco...@gmail.com

unread,
May 30, 2012, 11:06:24 PM5/30/12
to Google Maps JavaScript API v3
On May 30, 7:30 pm, Mapper99 <mappe...@gmail.com> wrote:
> Hmmm..I did listen to the map projection event and indeed it is defined.
>  The code that is failing I think has to do with the point...
>
> I uploaded a sample here:
>
> http://laudontech.com/temp2/badcode/papapump-planner.html
>
> You need to click on each of the icons on the right of the map

I don't see any icons on the right of the map, did you mean left?

> then click the done button at the very bottom of the page
> Click done once, error occurs.  Click done again, and all is well

I did't see any errors, but I also didn't see anything happen.

What browser are you using (I tried firefox and IE).

I managed to figure out how to get it to do something in firefox, IE
has an error, IE usually has problems with arrays with extraneous
commas at the end like this:

var connectTheDots = [
marker1.getPosition(),
marker2.getPosition(),
marker3.getPosition(), <---------- !!!! bad in IE
];

It adds a "complementary" null object at the end, that causes
problems.

-- Larry

geoco...@gmail.com

unread,
May 31, 2012, 1:05:49 AM5/31/12
to Google Maps JavaScript API v3
On May 30, 7:30 pm, Mapper99 <mappe...@gmail.com> wrote:
> Hmmm..I did listen to the map projection event and indeed it is defined.
>  The code that is failing I think has to do with the point...
>
> I uploaded a sample here:
>
> http://laudontech.com/temp2/badcode/papapump-planner.html
>
> You need to click on each of the icons on the right of the map
> then click the done button at the very bottom of the page
> Click done once, error occurs.  Click done again, and all is well
>
> Very strange!

Reading the documentation:
https://developers.google.com/maps/documentation/javascript/reference#MapCanvasProjection

google.maps.MapCanvasProjection object

This object is made available to the OverlayView from within the draw
method. It is not guaranteed to be initialized until draw is called.

looks you need to call draw before you use the projection.

-- Larry

geoco...@gmail.com

unread,
May 31, 2012, 1:15:06 AM5/31/12
to Google Maps JavaScript API v3
On May 30, 10:05 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On May 30, 7:30 pm, Mapper99 <mappe...@gmail.com> wrote:
>
> > Hmmm..I did listen to the map projection event and indeed it is defined.
> >  The code that is failing I think has to do with the point...
>
> > I uploaded a sample here:
>
> >http://laudontech.com/temp2/badcode/papapump-planner.html
>
> > You need to click on each of the icons on the right of the map
> > then click the done button at the very bottom of the page
> > Click done once, error occurs.  Click done again, and all is well
>
> > Very strange!
>
> Reading the documentation:https://developers.google.com/maps/documentation/javascript/reference...
>
> google.maps.MapCanvasProjection object
>
> This object is made available to the OverlayView from within the draw
> method. It is not guaranteed to be initialized until draw is called.
>
> looks you need to call draw before you use the projection.

This seems to work:
http://www.geocodezip.com/laudontech_com_papapump-plannerA.html
(except in IE)

Mapper99

unread,
May 31, 2012, 1:47:22 AM5/31/12
to google-map...@googlegroups.com
Looks good!  How did you fix it?

M

geoco...@gmail.com

unread,
May 31, 2012, 1:53:27 AM5/31/12
to Google Maps JavaScript API v3
On May 30, 10:47 pm, Mapper99 <mappe...@gmail.com> wrote:
> Looks good!  How did you fix it?

I think the "fix" was using this line (which was commented out in
BdccArrowedPolyline)

this.prj = this.getProjection();

-- Larry
Message has been deleted

rahul ghige

unread,
May 30, 2012, 2:28:30 AM5/30/12
to google-map...@googlegroups.com
  Hi ,

 Please Define
 
 var p1 = "" ;

 and then check it ....

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/iuSt5TjOCxcJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.



--

Regards

Rahul S.Ghige
Cell: +91-9822503856
Email: rah...@edreamz.in
Development Team,
E-Dreamztech Pvt Ltd., Pune

Mapper99

unread,
May 31, 2012, 2:42:19 AM5/31/12
to google-map...@googlegroups.com
Any idea why this code does not work in IE?

geoco...@gmail.com

unread,
May 31, 2012, 8:30:46 AM5/31/12
to Google Maps JavaScript API v3
On May 30, 11:42 pm, Mapper99 <mappe...@gmail.com> wrote:
> Any idea why this code does not work in IE?

Not with the error messages I have seen:

Message: Object doesn't support this property or method
Line: 293
Char: 3
Code: 0
URI: http://www.geocodezip.com/laudontech_com_papapump-plannerA.html

I haven't had a chance to look at the problem on a computer that has a
debugger for IE. I will when I can, but it might be a while (the
weekend).

Bill Chadwick

unread,
May 31, 2012, 2:39:58 PM5/31/12
to Google Maps JavaScript API v3
Glad someone else has ported the arrowline code to V3 - just the job
for a pipeline.

Lack of the projection object early on with V3 is a pain. As its not
that complicated, it can be easier to recreate the projection code in
your own object e.g.

function MyProjection() {
};

MyProjection.prototype.fromLatLngToPoint = function(latLng, opt_point)
{

if (latLng == null)
return null;

var point = opt_point || new google.maps.Point(0, 0);

var lat = latLng.lat();
var lng = latLng.lng();

if (lng > 180.0)
lng -= 360.0;
lng /= 360.0;
lng += 0.5;

lat = 0.5 - ((Math.log(Math.tan((Math.PI / 4.0) + ((0.5 * Math.PI
* lat) / 180.0))) / Math.PI) / 2.0);

point.x = lng * 256.0;
point.y = lat * 256.0;

return point;
};

MyProjection.prototype.fromPointToLatLng = function(point, noWrap) {

var lng = -180.0 + ((point.x/256.0) * 360.0);
var lat = (180.0 / Math.PI) * ((2 * Math.atan(Math.exp(Math.PI *
(1 - (2 * (point.y/256.0)))))) - (Math.PI / 2));
return new google.maps.LatLng(lat, lng, noWrap);
};

On May 31, 1:30 pm, "geocode...@gmail.com" <geocode...@gmail.com>

Mapper99

unread,
May 31, 2012, 8:25:57 PM5/31/12
to google-map...@googlegroups.com
Hi Bill,

This indeed is some fantastic code.  Not sure how to make it work in IE though?

M

geoco...@gmail.com

unread,
Jun 1, 2012, 1:55:51 AM6/1/12
to Google Maps JavaScript API v3
On May 31, 5:30 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On May 30, 11:42 pm, Mapper99 <mappe...@gmail.com> wrote:
>
> > Any idea why this code does not work in IE?
>
> Not with the error messages I have seen:
>
> Message: Object doesn't support this property or method
> Line: 293
> Char: 3
> Code: 0
> URI:http://www.geocodezip.com/laudontech_com_papapump-plannerA.html
>
> I haven't had a chance to look at the problem on a computer that has a
> debugger for IE.  I will when I can, but it might be a while (the
> weekend).

Fixed. It was the element/variable "staticMapURL". In IE if you don't
declare javascript variables that have the same name as HTML element
ids, IE creates a variable for you with the element id, that variable
can't be a string.

See:
http://www.geocodezip.com/laudontech_com_papapump-plannerA.html

-- Larry

Berry Ratliff

unread,
Jun 1, 2012, 10:40:24 AM6/1/12
to Google Maps JavaScript API v3
Hi Bill,

I believe the API has abandoned SVG in favor of CANVAS.

I developed an arrow facility for static maps using CANVAS.

http://home.provide.net/~bratliff/harbor/

I never ported to the API because no convenient way to extract points
exists. The use of Lat / Lng methods for every point is impractical.
If you agree, please star:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3976

Berry

Enoch Lau (Google Employee)

unread,
Jun 2, 2012, 6:02:43 AM6/2/12
to google-map...@googlegroups.com
There is an open issue for polylines with arrows (http://code.google.com/p/gmaps-api-issues/issues/detail?id=1811). Please star it if you'd like to see it in the Maps API.

Enoch

Mapper99

unread,
Jun 2, 2012, 2:52:27 PM6/2/12
to google-map...@googlegroups.com
Ahh...I see.  I actually ran into the same problem on another project!  I added the var before the variable and, all works well on localhost.  The minute I try on the server, it still crashes!


Mind boggling.

M

geoco...@gmail.com

unread,
Jun 2, 2012, 3:25:45 PM6/2/12
to Google Maps JavaScript API v3
On Jun 2, 11:52 am, Mapper99 <mappe...@gmail.com> wrote:
> Ahh...I see.  I actually ran into the same problem on another project!  I
> added the var before the variable and, all works well on localhost.  The
> minute I try on the server, it still crashes!
>
> http://laudontech.com/temp2/papapumpfinal/papapump-planner.html
>
> Mind boggling.

If you want my guess, you didn't fix the "dangling comma" in your
array:

var connectTheDots = [
marker1.getPosition(),
marker2.getPosition(),
marker3.getPosition(), // <------- "dangling comma", bad in IE

];

-- Larry

geoco...@gmail.com

unread,
Jun 2, 2012, 3:48:48 PM6/2/12
to Google Maps JavaScript API v3
On Jun 2, 12:25 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Jun 2, 11:52 am, Mapper99 <mappe...@gmail.com> wrote:
>
> > Ahh...I see.  I actually ran into the same problem on another project!  I
> > added the var before the variable and, all works well on localhost.  The
> > minute I try on the server, it still crashes!
>
> >http://laudontech.com/temp2/papapumpfinal/papapump-planner.html
>
> > Mind boggling.
>
> If you want my guess, you didn't fix the "dangling comma" in your
> array:
>
>                 var connectTheDots = [
>                         marker1.getPosition(),
>                         marker2.getPosition(),
>                         marker3.getPosition(),  // <------- "dangling comma", bad in IE
>
>                 ];

http://www.geocodezip.com/laudontech_com_papapump-planner_20120602a.html

Mapper99

unread,
Jun 2, 2012, 4:31:48 PM6/2/12
to google-map...@googlegroups.com
ug, how embarrassing... sometimes its a wonder I get out of bed in the morning...

Funny that localhost didn't complain though?

Thanks for all your help!

geoco...@gmail.com

unread,
Jun 2, 2012, 5:46:04 PM6/2/12
to Google Maps JavaScript API v3
On Jun 2, 1:31 pm, Mapper99 <mappe...@gmail.com> wrote:
> ug, how embarrassing... sometimes its a wonder I get out of bed in the
> morning...
>
> Funny that localhost didn't complain though?

Maybe you weren't testing the same version on localhost. Can't really
tell as (obviously) I can't see the version on your localhost. Or
maybe you didn't upload the external javascript maps.js. Or maybe it
was stuck in the IE cache.

Main thing is it is working for you now on the live version.

-- Larry
Reply all
Reply to author
Forward
0 new messages