<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
<Document>
<name>markers.kml</name>
<Placemark>
<name>Маркер №1</name>
<description>
<![CDATA[
Описание маркера №1
]]>
</description>
<Point>
<coordinates>30.3, 59.94</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Маркер №2</name>
<description>
<![CDATA[
Описание маркера №2
]]>
</description>
<Point>
<coordinates>30.35, 59.945</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Маркер №3</name>
<description>
<![CDATA[
Описание маркера №3
]]>
</description>
<Point>
<coordinates>30.4, 59.95</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Хороший пример работы с Google Maps API. Ваши маркеры и описание в kml файле
Код:
index.html
Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(30.3, 59.94);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var timestamp = new Date().getTime();
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markersKML = new google.maps.KmlLayer('http://Ваш сайт/markers.kml?' + timestamp);
markersKML.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(30.3, 59.94);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var timestamp = new Date().getTime();
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markersKML = new google.maps.KmlLayer('http://Ваш сайт/markers.kml?' + timestamp);
markersKML.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Живой пример:
http://goo.gl/Vq5oR
-------------------------------------
KML — это формат представления географических данных для отображения в программах Google Планета Земля, Карты Google и Карты Google для мобильных устройств. Файлы KML позволяют точно обозначать места, накладывать изображения и по-новому отображать данные. KML — международный стандарт, поддерживаемый компанией Open Geospatial Consortium, Inc. (OGC).
-------------------------------------
Как работает KML
Все очень просто:
вы формируете необходимый вам KML файл у себя на сервере;
вы отправляете его через Google Maps API на сервер Google Maps;
Google Maps отображает данные из вашего KML файла на вашей карте.
В итоге ваш KML файл будет выведен поверх тайлов Google Maps, то есть ваши данные будут отображены как изображение поверх карты Гугла. При этом все объекты из KML файла будут кликабельные, и к ним можно будет обращаться. А так как данные «зашиты» в тайлы карт, в DOM вашей карты не будет лишних элементов, и вам не придется переживать о производительности. Вдобавок ко всему, итоговые изображения кешируются и все работает супер быстро.