В процессе работы над модулем, которым сейчас занимаюсь, встала такая задачка: есть несколько маркеров, нужно отобразить их на карте так, чтобы все поместились на карте.
Решение: в итоге компиляции всей информации из документации и статей по Google API v3 получился такой замечательно работающий пример.[spoiler]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API v3 авто зум и авто центр карты</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initmap(){
//тестовый массив координат для маркеров
var points = [
{
lat : 56.329918,
lon: 44.009193,
title: "marker1"
},
{
lat : 56.294853,
lon: 43.975372,
title: "marker2"
},
{
lat : 56.328667,
lon: 43.990444,
title: "marker3"
}
];
var myOptions = {
//центр и масштаб устанавливаем ниже
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
for (j in points){
pos = new google.maps.LatLng(points[j]['lat'],points[j]['lon']);
//if (j==0) map.setCenter(pos);//работает и без прямой установки центра
marker = new google.maps.Marker({
position: pos,
map: map,
title: points[j]['title']
});
bounds.extend(pos);
}//for
map.fitBounds(bounds);
}
window.onload = initmap;
</script>
<style type="text/css" media="screen">
#map_canvas {
height: 500px;
width: 500px;
z-index: 1;
}
</style>
</head>
<body><div id="map_canvas"></div></body>
</html>
Пример со всплывающими инфо-окнами (балунами) - отображаются при клике по маркеру:
function initmap(){
//тестовый массив координат для маркеров
var points = [
{
lat : 56.329918,
lon: 44.009193,
title: "marker1",
contentString: "<p class=\"title\">Marker 1 text</p>"
},
{
lat : 56.294853,
lon: 43.975372,
title: "marker2 without infowindow", //без текста
},
{
lat : 56.328667,
lon: 43.990444,
title: "marker3",
contentString: "<p class=\"title\">Marker 3 text</p>"
}
];
var myOptions = {
//центр и масштаб устанавливаем ниже
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
//балун один для всех маркеров
//при клике переназначается выбранному маркеру с заменой текста
var infowindow = new google.maps.InfoWindow({});
//для закрытия балуна при клике пустой части карты
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
//можно сложить маркеры в массив
//потом удалять маркеры через markersArray.length = 0;
//var markersArray = new Array();
for (j in points){
var pos = new google.maps.LatLng(points[j]['lat'],points[j]['lon']);
//if (j==0) map.setCenter(pos);//работает и без прямой установки центра
var marker = new google.maps.Marker({
position: pos,
map: map,
title: points[j]['title']
});
var contentString = points[j]['contentString'];
if (contentString){
marker.html = contentString;
google.maps.event.addListener(marker, 'click', function(event){
//тут this - это marker снаружи функции
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
bounds.extend(pos);
//markersArray.push(marker);//если складывать в массив
}//for
//умещаем многоугольник в окне карты
map.fitBounds(bounds);
}
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».