И так, что нужно: разместить на карте несколько меток с по ранее известным координатам + к меткам добавить свое описание.
На данный момент сделал все, что нужно, но только для одно метки, как сделать для over 100 меток - не знаю.
<div id="map_canvas" class="map_canvas" style="width: 715px;height: 300px;"></div>
var latlng = new google.maps.LatLng('49.444433','32.059767');
var contentString = '<h1>Text</h1>';
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
});
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Спустя 58 минут, 22 секунды (24.04.2012 - 14:05) SoMeOnE написал(а):
Там можно отдельный аккаунт зарегистрировать (только для google maps). Внутри создавать сколько хочешь карт. После любую карту можно и в iframe к себе на сайт. И ссылку на карту большего размера давать из своего сайта. И сколько хочешь меток ставить.
У меня тоже одно время была такая проблема просто. Так решили. Намного удобней. И после поддерживать такую карту намного легче (любой может)
У меня тоже одно время была такая проблема просто. Так решили. Намного удобней. И после поддерживать такую карту намного легче (любой может)
Спустя 1 час, 15 минут, 2 секунды (24.04.2012 - 15:20) RCuPeR написал(а):
Нет, такой способ мне не подходит. Мне нужно на стороне сервера генерировать координаты меток и соответственно ballons к ним.
Сделал кластеризацию, получился очень симпатичный вывод меток. Но как только начал пилить ballon - все пошло крахом. Выводит карту, но ни меток, ни балунов нету.
Вот исходник:
Сделал кластеризацию, получился очень симпатичный вывод меток. Но как только начал пилить ballon - все пошло крахом. Выводит карту, но ни меток, ни балунов нету.
Вот исходник:
Свернутый текст
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer</title>
<style type="text/css">
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 600px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/m arkerclusterer.js"></script>
<script type="text/javascript">
function initialize()
{
var center = new google.maps.LatLng(56.316667, 44.0);
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 11,
center: center,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
$.getJSON("markers.php", function (json)
{
if (json.status == 'OK')
{
var markers = [];
for (var i = 0; i < json.markers.length; i++)
{
var baloon = '<div><strong>' + json.markers[i].cname + '</strong><br>' + json.markers[i].address + '<\/div>'
var marker = add_marker(json.markers[i].lon, json.markers[i].lat, json.markers[i].cname, baloon);
markers.push(marker);
}
var mcOptions = {gridSize: 50, maxZoom: 15};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
else
{
alert('Произошла ошибка!');
}
});
}
function add_marker(lat, lng, title, box_html)
{
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
Спустя 57 минут, 35 секунд (24.04.2012 - 16:18) smotzart написал(а):
function initialize(arrayLatLng) {
//arrayLatLng - массив с координатами
markers = [];
markers2 = [];
latlngbounds = new google.maps.LatLngBounds();
var center = new google.maps.LatLng( 0,0 );
map = new google.maps.Map(document.getElementById('maps'), {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < arrayLatLng.length; i++) {
//создаю маркер и добавляю его в массив маркеров
var marker = add_marker(arrayLatLng[i].lat, arrayLatLng[i].lon, '', arrayLatLng[i].id);
markers2[arrayLatLng[i].id] = marker;
markers.push(marker);
}
//кластеризация маркеров, до этого необходимо подключить отдельные библиотеки
var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 8, gridSize: 50} );
//центрируем карту, так чтобы были видны все маркеры
map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
function add_marker(lat, lng, title, id) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
flat: true,
title: title
});
latlngbounds.extend(new google.maps.LatLng(lat, lng));
//по клику на маркер подтягую нужную мне информацию, если маркеров не многа , то данную информацию можно передавать массивом arrayLatLng
google.maps.event.addListener(marker, 'click', function () {
$.getJSON("shops.php?&getinfo=" + id_relation , function (json) {
var baloon = '<div><\/div>'
var infowindow = new google.maps.InfoWindow({
content: baloon
});
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
});
});
return marker;
}
}
}
//arrayLatLng - массив с координатами
markers = [];
markers2 = [];
latlngbounds = new google.maps.LatLngBounds();
var center = new google.maps.LatLng( 0,0 );
map = new google.maps.Map(document.getElementById('maps'), {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < arrayLatLng.length; i++) {
//создаю маркер и добавляю его в массив маркеров
var marker = add_marker(arrayLatLng[i].lat, arrayLatLng[i].lon, '', arrayLatLng[i].id);
markers2[arrayLatLng[i].id] = marker;
markers.push(marker);
}
//кластеризация маркеров, до этого необходимо подключить отдельные библиотеки
var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 8, gridSize: 50} );
//центрируем карту, так чтобы были видны все маркеры
map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
function add_marker(lat, lng, title, id) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
flat: true,
title: title
});
latlngbounds.extend(new google.maps.LatLng(lat, lng));
//по клику на маркер подтягую нужную мне информацию, если маркеров не многа , то данную информацию можно передавать массивом arrayLatLng
google.maps.event.addListener(marker, 'click', function () {
$.getJSON("shops.php?&getinfo=" + id_relation , function (json) {
var baloon = '<div><\/div>'
var infowindow = new google.maps.InfoWindow({
content: baloon
});
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
});
});
return marker;
}
}
}
Спустя 4 минуты, 56 секунд (24.04.2012 - 16:23) smotzart написал(а):
У меня другая проблема. При инициализации карты через getJSON получаю более 10 000 точек. Оптимизировал вывод и заполнение карты под нормальные браузеры до 8 сек. У заказчика во всех версиях ИЕ виснет браузер ( у меня в ИЕ8 норм работает). Если передаю json-ом 2000 точек, то работает отлично. Не подскажете что делать с ИЕ ?
_____________
Гнусный социопат с комплексом Бога.