demo:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>KML Layers</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> function initialize() { var chicago = new google.maps.LatLng(41.875696,-87.624207); var mapOptions = { zoom: 11, center: chicago } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var ctaLayer = new google.maps.KmlLayer({ url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml' }); ctaLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
cta.kml
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.1"> <!-- Data derived from: Ed Knittel - || tastypopsicle.com Feel free to use this file for your own purposes. Just leave the comments and credits when doing so. --> <Document> <name>Chicago Transit Map</name> <description>Chicago Transit Authority train lines</description> <Style id="blueLine"> <LineStyle> <color>ffff0000</color> <width>4</width> </LineStyle> </Style> <Style id="redLine"> <LineStyle> <color>ff0000ff</color> <width>4</width> </LineStyle> </Style> <Style id="greenLine"> <LineStyle> <color>ff009900</color> <width>4</width> </LineStyle> </Style> <Style id="orangeLine"> <LineStyle> <color>ff00ccff</color> <width>4</width> </LineStyle> </Style> <Style id="pinkLine"> <LineStyle> <color>ffff33ff</color> <width>4</width> </LineStyle> </Style> <Style id="brownLine"> <LineStyle> <color>ff66a1cc</color> <width>4</width> </LineStyle> </Style> <Style id="purpleLine"> <LineStyle> <color>ffcc00cc</color> <width>4</width> </LineStyle> </Style> <Style id="yellowLine"> <LineStyle> <color>ff61f2f2</color> <width>4</width> </LineStyle> </Style> <Placemark> <name>Blue Line</name> <styleUrl>#blueLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.89289951324463,41.97881025520548,0 -87.89184808731079,41.97788506340239,0 -87.89150476455688,41.97762983571196,0 -87.8912901878357,41.97750222148314,0 -87.73756206035614,41.8521016001764,0 -87.73778736591339,41.85206164224564,0 -87.73803412914276,41.85206164224564,0 -87.74552285671234,41.85189381866398,0 -87.7565735578537,41.85182988575514,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Red Line</name> <styleUrl>#redLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.67283499240875,42.019110918045044,0 -87.66907453536987,42.01585473134908,0 -87.66744375228882,42.014483688722116,0 -87.66716480255127,42.014228607763144,0 -87.626058,41.750851,0 -87.625870,41.736142,0 -87.625259,41.721877,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Green Line</name> <styleUrl>#greenLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.8049498796463,41.8868887424469,0 -87.79437124729156,41.88703894615173,0 -87.78372824192047,41.88716769218445,0 -87.77429759502411,41.88731789588928,0 -87.75661647319794,41.88741445541382,0 -87.64607191085815,41.77918195724487,0 -87.64630794525146,41.77923560142517,0 -87.664416,41.778970,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Orange Line</name> <styleUrl>#orangeLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.73805022239685,41.78673505783081,0 -87.73810386657715,41.79256081581116,0 -87.72440314292908,41.79991006851196,0 -87.71584153175354,41.80354714393616,0 -87.6268458366394,41.87411069869995,0 -87.62665271759033,41.86731934547424,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Pink Line</name> <styleUrl>#pinkLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.6339054107666,41.88586950302124,0 -87.633890,41.883259,0 -87.633885,41.879289,0 -87.63370156288147,41.87709331512451,0 -87.63366937637329,41.876996755599976,0 -87.63359427452087,41.87693238258362,0 -87.63347625732422,41.87690019607544,0 -87.62633085250854,41.876975297927856,0 -87.73803412914276,41.85206164224564,0 -87.74552285671234,41.85189381866398,0 -87.7565735578537,41.85182988575514,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Brown Line</name> <styleUrl>#brownLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.71307349205017,41.96800221934201,0 -87.71303057670593,41.96639082739174,0 -87.71301984786987,41.96627914525123,0 -87.63107299804688,41.885762214660645,0 -87.6339054107666,41.88586950302124,0 -87.634110,41.888634,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Purple Line</name> <styleUrl>#purpleLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.69055902957916,42.072787284851074,0 -87.68584907054901,42.06420421600342,0 -87.633885,41.879289,0 -87.633890,41.883259,0 -87.6339054107666,41.88586950302124,0 -87.634110,41.888634,0 </coordinates> </LineString> </Placemark> <Placemark> <name>Yellow Line</name> <styleUrl>#yellowLine</styleUrl> <LineString> <altitudeMode>relative</altitudeMode> <coordinates> -87.75250,42.04049,0 -87.74726629257202,42.02620267868042,0 -87.74621486663818,42.0246148109436,0 -87.6747179031372,42.02038764953613,0 -87.67283499240875,42.019110918045044,0 </coordinates> </LineString> </Placemark> </Document> </kml>