Google maps: Change colour of polyline when clicked, but change colour back to original colour when second...
up vote
1
down vote
favorite
I have a site which has numerous hiking paths displayed as polylines in Google maps. All polylines have Strokecolor green as default. I would like it that when a polyline is clicked, the polyline colour turns red. It should remain red until a second (different) polyline is clicked. The first polyline should then turn back to green and the second polyline turns red.
I have searched and search and tried numerous solutions, but none work.
The "test" code I have submitted is "clean" without any of my failed attempts.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45, lng: -87},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight
});
flightPath.setMap(map);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
}
</script>
</body>
</html>
google-maps edited Nov 8 at 19:32
geocodezip
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
add a comment |
up vote
1
down vote
favorite
I have a site which has numerous hiking paths displayed as polylines in Google maps. All polylines have Strokecolor green as default. I would like it that when a polyline is clicked, the polyline colour turns red. It should remain red until a second (different) polyline is clicked. The first polyline should then turn back to green and the second polyline turns red.
I have searched and search and tried numerous solutions, but none work.
The "test" code I have submitted is "clean" without any of my failed attempts.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45, lng: -87},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight
});
flightPath.setMap(map);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
}
</script>
</body>
</html>
edited Nov 8 at 19:32
geocodezip
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I have a site which has numerous hiking paths displayed as polylines in Google maps. All polylines have Strokecolor green as default. I would like it that when a polyline is clicked, the polyline colour turns red. It should remain red until a second (different) polyline is clicked. The first polyline should then turn back to green and the second polyline turns red.
I have searched and search and tried numerous solutions, but none work.
The "test" code I have submitted is "clean" without any of my failed attempts.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45, lng: -87},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight
});
flightPath.setMap(map);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
}
</script>
</body>
</html>
edited Nov 8 at 19:32
geocodezip
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
I have a site which has numerous hiking paths displayed as polylines in Google maps. All polylines have Strokecolor green as default. I would like it that when a polyline is clicked, the polyline colour turns red. It should remain red until a second (different) polyline is clicked. The first polyline should then turn back to green and the second polyline turns red.
I have searched and search and tried numerous solutions, but none work.
The "test" code I have submitted is "clean" without any of my failed attempts.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45, lng: -87},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight
});
flightPath.setMap(map);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
}
</script>
</body>
</html>
edited Nov 8 at 19:32
geocodezip
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
edited Nov 8 at 19:32
geocodezip
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
edited Nov 8 at 19:32
geocodezip
123k10137167
edited Nov 8 at 19:32
geocodezip
123k10137167
edited Nov 8 at 19:32
geocodezip
123k10137167
123k10137167
asked Nov 8 at 18:10
Alastair Green
245
asked Nov 8 at 18:10
Alastair Green
245
asked Nov 8 at 18:10
Alastair Green
245
245
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
add a global var .. previous path and assign the object value when you click an object then change the color for th actual object and restore th color for the prev_path object
var prev_path;
flightPath.addListener('click', function(event) {
this.setOptions({
zIndex: 10,
strokeColor: your_strokeColor,
strokeOpacity: your_strokeOpacity,
strokeWeight: your__strokeWeight
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
if (prevPath){
prev_path.setOptions({
zIndex: 10,
strokeColor: your_color_for_not_select_strokeColor,
strokeOpacity: your_color_for_not_select_strokeOpacity,
strokeWeight: your_color_for_not_select_strokeWeight
});
}
prev_path = this;
});
edited Nov 10 at 15:14
Alastair Green
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
add a comment |
up vote
0
down vote
One option would be to keep references to all the polylines, process through that list setting them back to the default value on a click, then set the current polyline to the "selected color.
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
proof of concept fiddle
code snippet:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>answered Nov 8 at 19:31
geocodezip
123k10137167
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
add a global var .. previous path and assign the object value when you click an object then change the color for th actual object and restore th color for the prev_path object
var prev_path;
flightPath.addListener('click', function(event) {
this.setOptions({
zIndex: 10,
strokeColor: your_strokeColor,
strokeOpacity: your_strokeOpacity,
strokeWeight: your__strokeWeight
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
if (prevPath){
prev_path.setOptions({
zIndex: 10,
strokeColor: your_color_for_not_select_strokeColor,
strokeOpacity: your_color_for_not_select_strokeOpacity,
strokeWeight: your_color_for_not_select_strokeWeight
});
}
prev_path = this;
});
edited Nov 10 at 15:14
Alastair Green
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
add a comment |
up vote
1
down vote
accepted
add a global var .. previous path and assign the object value when you click an object then change the color for th actual object and restore th color for the prev_path object
var prev_path;
flightPath.addListener('click', function(event) {
this.setOptions({
zIndex: 10,
strokeColor: your_strokeColor,
strokeOpacity: your_strokeOpacity,
strokeWeight: your__strokeWeight
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
if (prevPath){
prev_path.setOptions({
zIndex: 10,
strokeColor: your_color_for_not_select_strokeColor,
strokeOpacity: your_color_for_not_select_strokeOpacity,
strokeWeight: your_color_for_not_select_strokeWeight
});
}
prev_path = this;
});
edited Nov 10 at 15:14
Alastair Green
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
add a global var .. previous path and assign the object value when you click an object then change the color for th actual object and restore th color for the prev_path object
var prev_path;
flightPath.addListener('click', function(event) {
this.setOptions({
zIndex: 10,
strokeColor: your_strokeColor,
strokeOpacity: your_strokeOpacity,
strokeWeight: your__strokeWeight
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
if (prevPath){
prev_path.setOptions({
zIndex: 10,
strokeColor: your_color_for_not_select_strokeColor,
strokeOpacity: your_color_for_not_select_strokeOpacity,
strokeWeight: your_color_for_not_select_strokeWeight
});
}
prev_path = this;
});
edited Nov 10 at 15:14
Alastair Green
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
add a global var .. previous path and assign the object value when you click an object then change the color for th actual object and restore th color for the prev_path object
var prev_path;
flightPath.addListener('click', function(event) {
this.setOptions({
zIndex: 10,
strokeColor: your_strokeColor,
strokeOpacity: your_strokeOpacity,
strokeWeight: your__strokeWeight
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
if (prevPath){
prev_path.setOptions({
zIndex: 10,
strokeColor: your_color_for_not_select_strokeColor,
strokeOpacity: your_color_for_not_select_strokeOpacity,
strokeWeight: your_color_for_not_select_strokeWeight
});
}
prev_path = this;
});
edited Nov 10 at 15:14
Alastair Green
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
edited Nov 10 at 15:14
Alastair Green
245
edited Nov 10 at 15:14
Alastair Green
245
edited Nov 10 at 15:14
Alastair Green
245
245
answered Nov 8 at 18:54
scaisEdge
89.4k94668
answered Nov 8 at 18:54
scaisEdge
89.4k94668
answered Nov 8 at 18:54
scaisEdge
89.4k94668
89.4k94668
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
add a comment |
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Perfect. I have updated your code with an if - else there is no prev_path. Only once prev_path is assigned a value should it run through that code
– Alastair Green
Nov 9 at 16:19
Done. Great answer
– Alastair Green
Nov 9 at 16:21
Done. Great answer
– Alastair Green
Nov 9 at 16:21
add a comment |
up vote
0
down vote
One option would be to keep references to all the polylines, process through that list setting them back to the default value on a click, then set the current polyline to the "selected color.
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
proof of concept fiddle
code snippet:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>answered Nov 8 at 19:31
geocodezip
123k10137167
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
add a comment |
up vote
0
down vote
One option would be to keep references to all the polylines, process through that list setting them back to the default value on a click, then set the current polyline to the "selected color.
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
proof of concept fiddle
code snippet:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>answered Nov 8 at 19:31
geocodezip
123k10137167
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
add a comment |
up vote
0
down vote
up vote
0
down vote
One option would be to keep references to all the polylines, process through that list setting them back to the default value on a click, then set the current polyline to the "selected color.
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
proof of concept fiddle
code snippet:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>answered Nov 8 at 19:31
geocodezip
123k10137167
One option would be to keep references to all the polylines, process through that list setting them back to the default value on a click, then set the current polyline to the "selected color.
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i=0; i<polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
proof of concept fiddle
code snippet:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script><script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script><script src="https://maps.googleapis.com/maps/api/js"></script>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<script>
var map;
var flightPath;
var pathSymbol;
function initMap() {
pathSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeColor: '#FF0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#FF0000',
fillOpacity: 1,
scale: 3
};
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 45,
lng: -87
},
zoom: 6
});
var flightPlanCoordinates = [
{ lat: 42.5, lng: -86.5 },
{ lat: 42.5, lng: -87.5},
{ lat: 43.5, lng: -88.5 },
{ lat: 44.5, lng: -88.5 },
{ lat: 46.5, lng: -89.5 },
{ lat: 49.5, lng: -89.5 },
];
var flightPlanCoordinates2 = [
{ lat: 42, lng: -86 },
{ lat: 42, lng: -87},
{ lat: 42, lng: -88 },
{ lat: 43, lng: -88 },
{ lat: 44, lng: -89 },
{ lat: 49, lng: -89 },
];
var arrayOfFlightPlans = [flightPlanCoordinates, flightPlanCoordinates2];
for (let i = 0; i < 2; i++) {
addPath({
path: arrayOfFlightPlans[i],
strokeColor: '#8CB65F',
strokeOpacity: 1.0,
strokeWeight: 4,
});
}
}
var polylines = ;
function addPath(props) {
flightPath = new google.maps.Polyline({
path: props.path,
strokeColor: props.strokeColor,
strokeOpacity: props.strokeOpacity,
strokeWeight: props.strokeWeight,
normalOptions: {
strokeColor: props.strokeColor,
},
selectedOptions: {
strokeColor: "red",
}
});
flightPath.setMap(map);
polylines.push(flightPath);
flightPath.addListener('mouseover', function(event) {
this.setOptions({
zIndex: 10,
icons: [{
icon: pathSymbol,
offset: '0',
repeat: '40px',
zIndex: 10
}],
});
});
flightPath.addListener('mouseout', function(event) {
this.setOptions({
zIndex: 0,
icons: [{
visible: false,
zIndex: 0
}],
});
});
flightPath.addListener('click', function(event) {
for (var i = 0; i < polylines.length; i++) {
polylines[i].setOptions(polylines[i].normalOptions)
}
this.setOptions(this.selectedOptions);
})
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>answered Nov 8 at 19:31
geocodezip
123k10137167
answered Nov 8 at 19:31
geocodezip
123k10137167
answered Nov 8 at 19:31
geocodezip
123k10137167
answered Nov 8 at 19:31
geocodezip
123k10137167
123k10137167
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
add a comment |
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
This is great and has helped me with another problem. But I'll use the solution from scaisEdge - it's a little simpler. Thank you.
– Alastair Green
Nov 9 at 16:17
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53213746%2fgoogle-maps-change-colour-of-polyline-when-clicked-but-change-colour-back-to-o%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
