Google Maps Static Map API path from KML

I am working on to convert map into Image. After studying, I have found that we can request for markers as well as path for converting image from the map.

In my case I need to convert all markers and KML file loaded on the map.

http://maps.google.com/maps/api/staticmap?center=38.267028,-82.83526899999998,&size=640x640&zoom=6&maptype=terrain&markers=icon:http://www.energymapit.com/Images/greensmallnew.PNG|37.52,-82.82|38.27,-82.84

This is what I have done so far for markers. And following parameters is used for path (line) path=40.737102,-73.990318|40.749825,-73.987963

My question is how can I extract coordinates or path from the kml file? any ways to get them in javascript or C#?

My KML file format is as shown below.

<?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:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd http://www.google.com/kml/ext/2.2 http://code.google.com/apis/kml/schema/kml22gx.xsd">
  <Document id="INGAA_pipes">
    <name>Big_Sandy</name>
    <Snippet>
    </Snippet>
    <Folder id="FeatureLayer0">
                    <name>Big_Sandy</name>
                    <Placemark id="ID_00285">
                        <name>Big_Sandy</name>
                        <MultiGeometry>
                            <LineString>
	<coordinates> -82.80105535917727,37.52602539768943,-4.116736818104982e-008 -82.80111801439419,37.52589238167445,-4.116736818104982e-008 -82.80111927760422,37.52577818748876,-4.116736818104982e-008 -82.80114454180459,37.5256663934021,-4.116736818104982e-008 -82.8011922911433,37.5255863058869,-4.116736818104982e-008 -82.80125355682921,37.52548360691238,-4.116736818104982e-008 -82.8013201279972,37.52536082289856,-4.116736818104982e-008 -82.80122475564077,37.52531496837487,-4.116736818104982e-008 -82.80110197162695,37.52525989241806,-4.116736818104982e-008 -82.80100849408557,37.52521997498147,-4.116736818104982e-008 -82.80088154147867,37.5251686886547,-4.116736818104982e-008 -82.80077341070107,37.52512700272408,-4.116736818104982e-008 -82.80064355271114,37.52507836913836,-4.116736818104982e-008 -82.80051470528923,37.52502784073761,-4.116736818104982e-008 -82.80039242655941,37.52497705969486,-4.116736818104982e-008 -82.80026572659453,37.52492375223206,-4.116736818104982e-008
      </coordinates>
	</LineString>
                        </MultiGeometry>
                    </Placemark>
                </Folder>
            <Style id="LineStyle00">
      <LabelStyle>
        <color>00000000</color>
        <scale>0.000000</scale>
      </LabelStyle>
      <LineStyle>
        <color>ffa8a800</color>
        <width>3.0</width>
      </LineStyle>
      <PolyStyle>
        <color>00000000</color>
        <outline>0</outline>
      </PolyStyle>
    </Style>
  </Document>
</kml>

One option is to use geoxml3 (or a similar third party parser like geoxml-v3) to parse the KML, grab the coordinates from its output and use those to create a static map.

Related Question: GMap Drawing tools to image jpeg (static map URL)

code snippet:

var map;
var overlays = [];

google.maps.drawing = {
  OverlayType: {
    MARKER: "MARKER",
    POLYLINE: "POLYLINE",
    POLYGON: "POLYGON"
  }
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-27.37777, -51.592762),
    zoom: 16
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6);
  });
  var geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: true
  });
  geoXml.parseKmlString(kmlLineStr);
  for (var i = 0; i < geoXml.docs[0].gpolylines.length; i++) {
    overlays.push({
      overlay: geoXml.docs[0].gpolylines[i],
      type: google.maps.drawing.OverlayType.POLYLINE
    });
  }
  createStaticMap();

}

google.maps.event.addDomListener(window, 'load', initialize);

function createStaticMap() {
  var fillC, strokeC, weight, path;
  var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk";
  var markersStr = "&markers="
  for (var i = 0; i < overlays.length; i++) {
    if (overlays[i].type == google.maps.drawing.OverlayType.POLYGON || overlays[i].type == google.maps.drawing.OverlayType.POLYLINE) {
      path = encodeURIComponent(google.maps.geometry.encoding.encodePath(overlays[i].overlay.getPath()));
      if (overlays[i].type == google.maps.drawing.OverlayType.POLYGON) {
        fillC = overlays[i].overlay.get("fillColor");
        strokeC = overlays[i].overlay.get("strokeColor");
        weight = overlays[i].overlay.get("strokeWeight");
        staticMap += "&path=";
        if (typeof fillC != "undefined") staticMap += "fillcolor:" + fillC.replace(/#/, "0x");
        if (typeof weight != "undefined") staticMap += "%7Cweight:" + weight;
        else staticMap += "%7Cweight:0";
        if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x");
        staticMap += "%7Cenc:" + path;
      } else if (overlays[i].type == google.maps.drawing.OverlayType.MARKER) {
        if (markersStr != "") markersStr += "|";
        markersStr += overlays[i].overlay.getPosition().toUrlValue(6);
      }
    }
    if (overlays[i].type == google.maps.drawing.OverlayType.POLYLINE) {
      fillC = overlays[i].overlay.get("fillColor");
      strokeC = overlays[i].overlay.get("strokeColor");
      weight = overlays[i].overlay.get("strokeWeight");

      staticMap += "&path=";
      if ((typeof weight != "undefined") && (weight > 1)) staticMap += "weight:" + weight;
      else staticMap += "weight:2";
      if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x");
      staticMap += "%7Cenc:" + path;
    }
  }
  staticMap += markersStr;
  document.getElementById('staticMap').innerHTML = staticMap;
  document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters";
}

var kmlLineStr = '<?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:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd http://www.google.com/kml/ext/2.2 http://code.google.com/apis/kml/schema/kml22gx.xsd"><Document id="INGAA_pipes"><name>Big_Sandy</name><Snippet></Snippet><Folder id="FeatureLayer0"><name>Big_Sandy</name><Placemark id="ID_00285"><name>Big_Sandy</name><MultiGeometry><LineString><coordinates>-82.80105535917727,37.52602539768943,-4.116736818104982e-008 -82.80111801439419,37.52589238167445,-4.116736818104982e-008 -82.80111927760422,37.52577818748876,-4.116736818104982e-008 -82.80114454180459,37.5256663934021,-4.116736818104982e-008 -82.8011922911433,37.5255863058869,-4.116736818104982e-008 -82.80125355682921,37.52548360691238,-4.116736818104982e-008 -82.8013201279972,37.52536082289856,-4.116736818104982e-008 -82.80122475564077,37.52531496837487,-4.116736818104982e-008 -82.80110197162695,37.52525989241806,-4.116736818104982e-008 -82.80100849408557,37.52521997498147,-4.116736818104982e-008 -82.80088154147867,37.5251686886547,-4.116736818104982e-008 -82.80077341070107,37.52512700272408,-4.116736818104982e-008 -82.80064355271114,37.52507836913836,-4.116736818104982e-008 -82.80051470528923,37.52502784073761,-4.116736818104982e-008 -82.80039242655941,37.52497705969486,-4.116736818104982e-008 -82.80026572659453,37.52492375223206,-4.116736818104982e-008      </coordinates></LineString></MultiGeometry></Placemark></Folder><Style id="LineStyle00"><LabelStyle><color>00000000</color><scale>0.000000</scale></LabelStyle><LineStyle><color>ffa8a800</color><width>3.0</width></LineStyle><PolyStyle><color>00000000</color><outline>0</outline></PolyStyle></Style></Document></kml>';
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  width: 200px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  float: right;
  margin: 10px;
}
#color-palette {
  clear: both;
}
.color-button {
  width: 14px;
  height: 14px;
  font-size: 0;
  margin: 2px;
  float: left;
  cursor: pointer;
}
#delete-button {
  margin-top: 5px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<h4>Static Map</h4>
<div id="imageholder"></div>
<div id="urllen"></div>
<div id="info"></div>
<h4>Google Maps Javascript API v3 Map</h4>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<h4>Static Map URL</h4>
<div id="staticMap"></div>