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.

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>

There are no user reviews yet.

Note: You have to be a registered member to leave a comment. Free registration here.