Google maps api demo

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>

 

posted @ 2015-05-28 22:37  emanlee  阅读(1042)  评论(0)  编辑  收藏  举报