Deepika Rao Deepika Rao - 2 months ago 18
Javascript Question

How to change value of an object that is a value inside another object

I am passing values to the function addPolyline(props) to change the path value and color dynamically

var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4,
strokeWeight: 2,
};



function addPolyline(props){
flightPath = new google.maps.Polyline({
path: props.flightPath,
geodesic: true,
strokeColor: props.color,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}]
});
}

addPolyline({
flightPath: flightPlanCoordinates,
color: "#f9a61e"
});


But how do I change the opacity which is inside lineSymbol but called in addPolyline as part of icon key.

PA. PA.
Answer Source

you need just to initialize the value in lineSymbol using your props to pass the required value

function addPolyline(props){  
   lineSymbol.strokeOpacity = props.symbolOpacity;   
   flightPath = new google.maps.Polyline({ 
    ...

or, if you don't want to modify the global lineSymbol

 function addPolyline(props){  
   var symbol = Object.assign({}, lineSymbol)
   symbol.strokeOpacity = props.symbolOpacity;   
   flightPath = new google.maps.Polyline({ 
     ...
     icons: [{
        icon: symbol,

and invoke with

addPolyline({
    flightPath: flightPlanCoordinates,
    color: "#f9a61e",
    symbolOpacity: 0.8
});