How to display multiple markers in Google Maps using KML file?
Written by kksou   
Friday, 15 May 2009

By default, the googleMaps plugin allows you to place only one marker on the map.

If you wish to place multiple markers on a googleMap, you can easily do so with the help of a KML (Keyhole Markup Language) file.

In this article, I'll show you how easy it is to set up a KML file to place multiple markers on Google Maps.

First, let us take a look at a real sample.


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/samples/kml_sample1.kml}

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

The Structure of a KML File

A sample KML file with only one marker looks like below:

<kml xmlns="http://www.google.com/earth/kml/2">
<Placemark>
  <name>Google Inc.</name>
  <description>1600 Amphitheatre Parkway, Mountain View, CA 94043</description>
  <Point>
    <coordinates>-122.0841430, 37.4219720, 0</coordinates>
  </Point>
</Placemark>
</kml>

Multiple Markers

To place multiple markers, we simply define three Placemark, as you can see in the KML file we've used in the demo above:

http://www.kksou.com/gmap/samples/kml_sample1.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
<Document>
  <name>kml_sample1.kml</name>
  <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>
    <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>
    <Point>
      <coordinates>-122.0250403,37.4163228</coordinates>
    </Point>
  </Placemark>

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

</Document>
</kml>

References for KML files

Here are some references if you wish to learn more about the KML files:


 

Comments  

 
# RajeshKrishnan 2012-06-27 00:54
:lol: Good work. You have extensively covered all the aspects. Thank you.
 
 
# alex74 2012-10-05 01:25
Can you display a full html page including the tag? Is it compatible with api v3?
Thanks
 
 
# Rk 2013-05-17 22:04
I have another example http://www.etechpulse.com/2013/05/how-to-show-google-map-multiple-markers.html
try this 1 ..
 
 
# Rm 2013-08-15 10:58
does any know how to this in CRM on Demand, in the calendar tab, showing all appoints for a given day.
 
 
# jose13 2013-11-30 09:50
How do I change the size of the text for each point?
 
< Prev

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2012. kksou.com. All Rights Reserved