Can you show kml in Google Maps without url? - google-maps-api-3

Question

If I have the contents of a KML in a file and want it to show on the google map without specifying a URL, is it possible? Say if I have a variable that contains a string of the entire KML, can I load it into Google Maps API v3 somehow or is this not possible?

Answer 1

It isn't possible with the native Google Maps Javascript API v3. It can be done with the parseKmlString method of the third party library geoxml3
[Disclaimer: I am the current maintainer of the geoxml3 library]
Code snippet:
var kmlString = '<kml><Document><name>Massachusetts Cities</name><Folder><Placemark><name>Boston</name><description>Boston is the capital of and largest city in Massachusetts. The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description><Point><coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates></Point></Placemark><Placemark><name>Worcester</name><description>Worcester is known as the "Heart of the Commonwealth" due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description><Point><coordinates>-71.80229299737233,42.26259300656061,145.2545892926215</coordinates></Point></Placemark><Placemark><name><![CDATA[M]]></name><description><![CDATA[the letter M]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.62467956542969,42.3280930282246 -71.62742614746094,42.25088477477569 -71.60476684570312,42.249868245939346 -71.6033935546875,42.29204042491614 -71.575927734375,42.25291778330197 -71.5594482421875,42.25190128722991 -71.53884887695312,42.28594498725423 -71.53678894042969,42.249868245939346 -71.51206970214844,42.249359975377885 -71.51893615722656,42.33215399891373 -71.55876159667969,42.33164639191572 -71.57180786132812,42.285437007491545 -71.59584045410156,42.32910829547648</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[A]]></name><description><![CDATA[the letter A]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.41044616699219,42.3346919724542 -71.37130737304688,42.3357071331938 -71.34452819824219,42.251393033050576 -71.37062072753906,42.249868245939346 -71.38229370117188,42.279340930853145 -71.40838623046875,42.279340930853145 -71.422119140625,42.248851700720934 -71.45370483398438,42.248851700720934,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name></name><description><![CDATA[]]></description><LineString><coordinates>-71.32186889648438,42.385937107381146 -71.69540405273438,42.379850764344134 -71.707763671875,42.14813264235833 -71.1968994140625,42.15118709351198 -71.32186889648438,42.385937107381146</coordinates></LineString></Placemark></Folder></Document></kml>'
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: {
lat: 42,
lng: -70
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({
map: map,
infoWindow: infowindow,
singleInfoWindow: true
});
geoXml.parseKmlString(kmlString);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 750px;
height: 600px;
margin: 0;
padding: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/polys/geoxml3.js"></script>
<div id="map_canvas">