How to position my map correctly in order to set the polylines properly?

Question

I'm actually showing routing to different regions using google maps. However for some regions the polyline is not appearing properly. It is being displayed as follows

I want to show a straight line from Palembang to Otani but instead it is taking curve that too in two different sides of map. May I know how to position the map correctly in order to get the line straight and not curved and also in one map.

Following is my code

getLatLngOfAddress(data){

    var geocoder = new google.maps.Geocoder();let latitude;let longitude;var startPoint; var endPoint;
    var marker; var startCoordinates = []; var endCoordinates = []; var flightPlanCoordinates = [];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(40.4637, 3.7492),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    map.markers = [];

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

    for(var i=0; i<data.length;i++){
        let port_of_loading = data[i].port_of_loading;
        let port_of_discharge = data[i].port_of_discharge
        geocoder.geocode( { 'address': port_of_loading}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latitude = results[0].geometry.location.lat();
                longitude = results[0].geometry.location.lng();
            } 
            startCoordinates.push({'lat': latitude, 'lng': longitude});
            flightPlanCoordinates.push({'lat': latitude, 'lng': longitude, 'port_of_loading':port_of_loading});
            startPoint = new google.maps.LatLng(latitude, longitude);
        }); 
        geocoder.geocode( { 'address': port_of_discharge}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latitude = results[0].geometry.location.lat();
                longitude = results[0].geometry.location.lng();  
            } 
            endCoordinates.push({'lat': latitude, 'lng': longitude});
            flightPlanCoordinates.push({'lat': latitude, 'lng': longitude, 'port_of_discharge':port_of_discharge});
            endPoint = new google.maps.LatLng(latitude, longitude);

            for(var j=0; j<flightPlanCoordinates.length; j++){
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(flightPlanCoordinates[j].lat, flightPlanCoordinates[j].lng),
                    map: map,
                });                    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(
                            '<span *ngIf="port_of_loading" class="info_content" ><strong> Port of Loading: '+flightPlanCoordinates[i].port_of_loading+'</strong>',
                            '<span *ngIf="port_of_discharge" class="info_content" ><strong> Port of Discharge: '+flightPlanCoordinates[i].port_of_discharge+'</strong>'  
                        );
                        infowindow.open(map, marker);
                    }
                })(marker, i));
                var flightPath = new google.maps.Polyline({
                    path: [startPoint, endPoint],
                    geodesic: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0,
                    icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '20px'
                    }],
                    strokeWeight: 2
                });
                flightPath.setMap(map);
            }

        });
    }
}

Answer 1

Remove geodesic: true from your Polylines.

You should read more here about spherical geometry concepts.