How to view kml files in custom google maps the same as it appears in google earth

I have a simple kml file that have MultiGeometry tag with both LineString and Point within:

here is how the kml file looks :

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>lines.kmz</name>
    <Style id="LineStyle00">
        <LabelStyle>
            <color>ff0000ff</color>
            <scale>2.0</scale>
        </LabelStyle>
        <LineStyle>
            <color>ff00ff55</color>
            <width>3</width>
        </LineStyle>
        <PolyStyle>
            <color>00000000</color>
            <outline>0</outline>
        </PolyStyle>
    </Style>
    <Folder id="FeatureLayer0">
        <name>مسارات المصارف الجديدة</name>
        <Snippet maxLines="0"/>
        <Placemark id="ID_00000">
            <name>العياط</name>
            <Snippet maxLines="0"/>
            <description>&lt;html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"&gt;

&lt;head&gt;

&lt;META http-equiv="Content-Type" content="text/html"&gt;

&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;

&lt;/head&gt;

&lt;body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"&gt;

&lt;tr style="text-align:center;font-weight:bold;background:#9CBCE2"&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE&lt;/td&gt;

&lt;td&gt;Polyline&lt;/td&gt;

&lt;/tr&gt;

&lt;tr bgcolor="#D4E4F3"&gt;

&lt;td&gt;الاسم&lt;/td&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE_Length&lt;/td&gt;

&lt;td&gt;3299.179106&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/body&gt;

&lt;/html&gt;</description>
            <styleUrl>#LineStyle00</styleUrl>
            <MultiGeometry>
                <LineString>
                    <coordinates>
                        31.22167327537224,29.60699409142521,0 31.21864638138206,29.60718181167419,0 31.21700996113995,29.60744215099063,0 31.21414622689401,29.60878103953701,0 31.21295610437081,29.60959924916077,0 31.20477400640138,29.60788844697299,0 31.20298882177771,29.61257455770906,0 31.19333333292129,29.60888888869802,0 
                    </coordinates>
                </LineString>
            <Point><coordinates>31.21295610437081,29.60959924916077,0</coordinates></Point></MultiGeometry>
        </Placemark>

    </Folder>
</Document>
</kml>

when I open this file on google earth it works like charm with both elements shown perfectly, but when I open it on my Google Maps using js script as follows:

            var kml_layer = new google.maps.KmlLayer(src, {
                suppressInfoWindows: true,
                preserveViewport: true,
                map: map
            });

it only shows LineString without the point shown on it .. any idea what could be causing this?