Re: Mouse Over Highlight Polyline From Outside V3 Script

862 views
Skip to first unread message
Message has been deleted

Chad Killingsworth

unread,
Nov 2, 2010, 6:48:05 PM11/2/10
to Google Maps JavaScript API v3
As long as flightpath is the global variable that references your
polyline,

<a href="" onMouseOver="flightPath.setOptions({strokeOpacity:
1,strokeWeight:4});">Linked Text</a>

More than that and we'll need to see a link to your map.

Chd Killingsworth

On Nov 2, 11:45 am, Richard <rich...@blueapex.co.uk> wrote:
> Hello,
>
> Simple question hopefully.
>
> I have a map in my web page - cunniny called "map". On that map I have
> a polyline named "flightpath"
>
> Trying to simply make that line bold when someone mouse overs a link.
>
> <a href=""
> onMouseOver="google.maps.flightPath.setOptions({strokeOpacity:
> 1,strokeWeight:4});">Linked Text</a>
>
> Does anyone have a link to a example of where this is being done? I've
> seen plenty of addListner examples but I'm wanting to bold the route
> from a mouseover that isn't on the map itself.
>
> Many thanks,
> Richard

Richard

unread,
Nov 2, 2010, 8:46:39 PM11/2/10
to Google Maps JavaScript API v3
Hello,

Many thanks for that. The map code is here.


Tried what you suggested but it didn't work. I think maybe flightPath
isn't set up as a global. I've read this
http://blog.ramonlechuga.com/2010/08/12/private-public-properties-for-javascript/
but can't make head nor tail of it. Understand the principle of
public / private vars just usually don't work with javascript.

Many Thanks,
Richard



<script type="text/javascript">

function initialize() {

var myOptions = {
scaleControl: true,
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},

navigationControl:
true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},

mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new
google.maps.Map(document.getElementById("map_canvass"), myOptions);

var southWest = new google.maps.LatLng(37.231864,-3.791990);
var northEast = new google.maps.LatLng(44.253835,-0.904276);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);

var BikeCoordinates = [new google.maps.LatLng(44.253835,
-0.904276),new google.maps.LatLng(42.169935, -1.949879),new
google.maps.LatLng(40.087353, -3.000221) ];

var flightPath = new google.maps.Polyline({
path: BikeCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}
</script>




On Nov 2, 10:48 pm, Chad Killingsworth

geoco...@gmail.com

unread,
Nov 2, 2010, 9:12:02 PM11/2/10
to Google Maps JavaScript API v3
On Nov 2, 5:46 pm, Richard <rich...@blueapex.co.uk> wrote:
> Hello,
>
> Many thanks for that. The map code is here.

Was there supposed to be a link? I don't see it in the groups
interface:
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/2121de2422cf5053/fbf53ccfa827a9d0#fbf53ccfa827a9d0

-- Larry


>
> Tried what you suggested but it didn't work. I think maybe flightPath
> isn't set up as a global. I've read thishttp://blog.ramonlechuga.com/2010/08/12/private-public-properties-for...
> > > Richard- Hide quoted text -
>
> - Show quoted text -
Message has been deleted

Chad Killingsworth

unread,
Nov 3, 2010, 7:33:38 AM11/3/10
to Google Maps JavaScript API v3
Yup flightpath isn't global. Your "var flightpath = " statement is
inside your initialize function. Outside your function, put "var
flightpath;", then inside you can do "flightpath = ". It should work
after that.

Chad Killingsworth

On Nov 3, 4:50 am, Richard <rich...@blueapex.co.uk> wrote:
> Sorry I posed the code below my message (tried to spit out the
> majority of the LatLngs).
>
> Link to the live page is here.http://www.motobimble.co.uk/route.php
> Will (when finished) show a trip round Africa I did on my bike.
>
> Idea is that when I hover over a month a part of the line for that
> month will turn orange. I'll work on splitting the line into months
> later for now I'm just trying to get the whole line changing colour on
> mouse over.
>
> Many thanks for your time
> Richard
>
> On Nov 3, 1:12 am, "geocode...@gmail.com" <geocode...@gmail.com>
> wrote:
>
>
>
>
>
>
>
> > On Nov 2, 5:46 pm, Richard <rich...@blueapex.co.uk> wrote:
>
> > > Hello,
>
> > > Many thanks for that. The map code is here.
>
> > Was there supposed to be a link?  I don't see it in the groups
> > interface:http://groups.google.com/group/google-maps-js-api-v3/browse_frm/threa...
Reply all
Reply to author
Forward
Message has been deleted
0 new messages