How to display multiple markers in different colors in Google Maps using KML file?

This article shows you how to place multiple markers in different colors on Google Maps with the use of KML file.

The demo below is similar to that of: Use KML file to place multiple markers on Google Maps.

The only difference is that the markers are displayed in different colors.


Demo

The following map is produced with the tag:

{googleMaps lat=37.4219720 long=-122.0841430 zoom=12 width=100% height=480
kml=http://www.kksou.com/gmap/test/kml_sample2.kml}

You can download a copy of the KML file here: http://www.kksou.com/gmap/test/kml_sample1.kml
(right click on the link and choose Save As...)

The KML File

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
<Document>
  <name>kml_sample2.kml</name>

<Style id="red">
  <IconStyle>
    <Icon>
      <href>http://www.google.com/intl/en_us/mapfiles/ms/icons/red-dot.png</href>
    </Icon>
  </IconStyle>
</Style>

<Style id="green">
  <IconStyle>
    <Icon>
      <href>http://www.google.com/intl/en_us/mapfiles/ms/icons/green-dot.png</href>
    </Icon>
  </IconStyle>
</Style>

<Style id="blue">
  <IconStyle>
    <Icon>
      <href>http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png</href>
    </Icon>
  </IconStyle>
</Style>

  <Placemark>
    <name>Google Inc.</name>
    <description><![CDATA[
      Google Inc.<br />
      1600 Amphitheatre Parkway<br />
      Mountain View, CA 94043<br />
      Phone: +1 650-253-0000<br />
      Fax: +1 650-253-0001<br />
      <p>Home page: <a href="http://www.google.com">www.google.com</a></p>
    ]]>
    </description>
    <styleUrl>#red</styleUrl> 
    <Point>
      <coordinates>-122.0841430, 37.4219720, 0</coordinates>
    </Point>
  </Placemark>

  <Placemark>
    <name>Yahoo! Inc.</name>
    <description><![CDATA[
      Yahoo! Inc.<br />
      701 First Avenue<br />
      Sunnyvale, CA 94089<br />
      Tel: (408) 349-3300<br />
      Fax: (408) 349-3301<br />
      <p>Home page: <a href="http://yahoo.com">http://yahoo.com</a></p>
      ]]>
    </description>
    <styleUrl>#green</styleUrl> 
    <Point>
      <coordinates>-122.0250403,37.4163228</coordinates>
    </Point>
  </Placemark>

  <Placemark>
    <name>Location 3</name>
    <description>This is location 3</description>
    <styleUrl>#blue</styleUrl> 
    <Point>
      <coordinates>-122.063,37.4063228</coordinates>
    </Point>
  </Placemark>

</Document>
</kml>