2-ва маркеры в Google Maps Api v3
Привет, нужна помощь, может кто-то уже с таким сталкивался ...
нужно отразить 2ва маркеры на google maps - при клике на маркер имеет выводится контент, у меня вийщло вывести лищы один такой маркет ... помогите пожалуйста http://jsfiddle.net/jEhJ3/597/ или подскажите в какую сторону копать |
Цитата:
|
спасибо .. но там при клике по маркеру - выводится блок информации ... на первом марке он есть, а на втором нет ...
если есть возможность то подскажите как и где вставить свой html для блока информации ... |
zerofx,
http://jsfiddle.net/jEhJ3/2906/ |
спасибо, и если можно последнее - где здесь функция которая отвечает за закрытие блока с тектом .. а точнее крестик на который закрывается ...
и вообще как сделать чтобы при открытии другого блока уже открытий закрылся? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.infobox-wrapper {
display:none;
}
#infobox {
border:2px solid black;
margin-top: 8px;
background:#333;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: .5em 1em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow:0 -1px #000000;
-webkit-box-shadow: 0 0 8px #000;
box-shadow: 0 0 8px #000;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var loc, map, marker, infobox;
loc = new google.maps.LatLng(-33.890542, 151.274856);
var myLatlng = new google.maps.LatLng(-33.890542, 151.2);
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
map: map,
position: loc,
visible: true
});
var marker2 = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Это второй маркер',
visible: true
});
infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
infobox2 = new InfoBox({
content: 'всяка разна хренотень ))) допиши остальное сам по 1 примеру',
boxStyle: {
background: "rgba(255, 255, 255, 1)",
opacity: 0.75,
width: "280px"
}
});
google.maps.event.addListener(marker, 'click', function() {
infobox2.close();
infobox.open(map, this);
map.panTo(loc);
});
google.maps.event.addListener(marker2, 'click', function() {
infobox.close();
infobox2.open(map, this);
map.panTo(myLatlng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body>
<div id="map" style="width: 100%; height: 300px"></div>
<br>
InfoBox as an easily customizable replacement for an InfoWindow. Click on the marker to see the infobox generated with custom html & css.
<div class="infobox-wrapper">
<div id="infobox">
The contents of your info box. It's very easy to create and customize.
</div>
</div>
</body>
</html>
|
хорошо .. а можно что-то придумать с крестиком? а точнее вось - http://pix.am/LZt6/
у меня это Сылка ... я хотел бы по клику закрывать этот блок ... как у Вас на макете ... http://pix.am/GBPb/ тольки чтобы не надо было для каждого маркера прописывать ... а один для всех |
Всем Спасибо :yes: , розобралса....
Тема закрита |
| Часовой пояс GMT +3, время: 02:14. |