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>