구글 맵 말풍선 항상 떠 있게끔 하고 싶습니다.
본문
아래 소스는 게시판 리스트 목록을 뽑아서 목록을 구글맵에 멀티마커 해주는 소스인데요..
자바를 도무지 모르니..ㅠㅠ 어렵네요...
클릭 했을때, 말풍선이 나오는건데, 애초에 말풍선이 나오게 하고 싶습니다...
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
이부분하고 연관이 있는것같은데... 클릭시에 말풍선이 나와라 라는 그런의미같은데..
그냥 처음부터 말풍선이 나오게 하려면 어디를 수정해야할까요 ㅠ
<!--구글지도 스타일/지도크기 -->
<style>
#mgmap { width: 100%; height:500px; margin:0; padding: 0px; border: 0px; }
</style>
<!--구글지도 스타일 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr"></script><!-- 수산나님 도움 지도에 동해로 나오게 변경 -->
<script type="text/javascript">
function mgminfomap(){
var myOptions = {
zoom: 3,
//center: new google.maps.LatLng(27.3114655, 90.94384680000007),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('mgmap'), myOptions);
var locations = [
<? for ($i=0; $i<count($list); $i++) {
$name1=strip_tags($list[$i][subject]);
$lat=($list[$i][wr_3]);
$lng=($list[$i][wr_4]);
$address=strip_tags($list[$i][wr_2]);
$mapnum=($list[$i][wr_id]);
$mtem="<table><tr><td width=100%><a href={$list[$i][href]}>$name1</a></td></tr><tr><td width=100%>{$address}</td></tr></table>";
?>
['<?=$mtem?>', '<?=$lat?>', '<?=$lng?>', '<?=$mapnum?>']
<? if ($i==count($list)-1) continue; ?>
,
<? } ?>
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
zoomChangeBoundsListener = google.maps.event.addListener(map, "bounds_changed",function(event){
if(this.getZoom() > 20)
this.setZoom(16);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
// 성격파틴자님 조언 너무 가까이보일때 적용
}
google.maps.event.addDomListener(window, 'load', mgminfomap);
</script>
<?php if ($is_list && $lat != 37.5665) { //리스트검색결과 없을때,주소없을 경우(서울시청 동일 위도) 리스트에 지도 숨김 ?>
<div id="mgmap" style="padding-top:20px;padding-left:20px;padding-bottom:20px;verticul-align:middle; text-align:left;border:10px solid #f3f3f3;"></div>
<?php } ?>
<br />
<!--구글지도 끝 ---------------->
답변 1
올려주신 코드 무시하고 샘플올리자면
보시고 응용하세요
var infoWindow = null;
function initialize()
{
infoWindow = new google.maps.InfoWindow();
var windowLatLng = new google.maps.LatLng(43.25,-68.03);
infoWindow.setOptions({
content: "<div>This is the html content.</div>",
position: windowLatLng,
});
infoWindow.open(map);
} // end initialize
google.setOnLoadCallback(initialize);
답변을 작성하시기 전에 로그인 해주세요.
