How to display multiple markers in Google Maps using KML file?
Written by kksou   
Last Update: 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-2015. kksou.com. All Rights Reserved