Google Maps Static Map API path from KML

Question

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>

What does your KML file look like? How many marker are in it? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates what you are trying to do. — geocodezip, Apr 14 '16 at 13:25
thanks for showing interest, below is the KML file format which I am using, please have a look — Maharshi, Apr 14 '16 at 13:57
where is "below"? Please update your question with the information. — geocodezip, Apr 14 '16 at 14:01
sorry, the length was larger, so I had to post it in the answer, can you please have a look at? — Maharshi, Apr 14 '16 at 14:03
Hello, Failed to load resource: the server responded with a status of 413 (Request Entity Too Large) Can you please let me know what this error means, the length of my kml file is too high. how can I get rid of length issue? — Maharshi, Apr 15 '16 at 07:29
I assume you are using a different KML file than the example posted (which doesn't exhibit that error). It probably means the URL is too long. What is the code calculating for "URL length"? — geocodezip, Apr 15 '16 at 13:34
Ok, thanks for answering, the URL is an example, there are too many locations in the KML file. they all are appended in the URL by "|". there are thousands of locations (lat, long)s in the KML file, and I want all of them in the map image. you got my point yet? — Maharshi, Apr 16 '16 at 07:31

geocodezip · Answer 1 · 2022-01-13T20:45:27.023

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>

hey, geocodezip, above code works fine, but as i said I want not only to convert KML into the url. When I want to convert my KMl file into image with google static api, the browser can not handle such a long URL. My URL lengths about 11000 chars after encrypting. Do you get me? Please help me out, I am badly stuck with this issue. — Maharshi, Apr 20 '16 at 15:26
The URL is limited to a maximum length of 2048 characters. There is no work around for that. Perhaps you can simplify the polyline, can you provide a link to a KML file that exhibits the issue? — geocodezip, Apr 20 '16 at 15:37

Google Maps Static Map API path from KML

1 Answers1

Linked