구글 맵 말풍선 항상 떠 있게끔 하고 싶습니다. 채택완료
본드공
9년 전
조회 19,467
아래 소스는 게시판 리스트 목록을 뽑아서 목록을 구글맵에 멀티마커 해주는 소스인데요..
자바를 도무지 모르니..ㅠㅠ 어렵네요...
클릭 했을때, 말풍선이 나오는건데, 애초에 말풍선이 나오게 하고 싶습니다...
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
이부분하고 연관이 있는것같은데... 클릭시에 말풍선이 나와라 라는 그런의미같은데..
그냥 처음부터 말풍선이 나오게 하려면 어디를 수정해야할까요 ㅠ
</p><p><!--구글지도 스타일/지도크기 --></p><p><style></p><p>#mgmap { width: 100%; height:500px; margin:0; padding: 0px; border: 0px; }</p><p></style></p><p><!--구글지도 스타일 --></p><p> </p><p><script type="text/javascript" src="<a href="<a href="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr" target="_blank" rel="noopener noreferrer">http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr</a>"><a href="http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr" target="_blank" rel="noopener noreferrer">http://maps.google.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr</a></a>"></script><!-- 수산나님 도움 지도에 동해로 나오게 변경 --></p><p><script type="text/javascript"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>function mgminfomap(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var myOptions = {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>zoom: 3,</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>//center: new google.maps.LatLng(27.3114655, 90.94384680000007),</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>mapTypeId: google.maps.MapTypeId.ROADMAP</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>var map = new google.maps.Map(document.getElementById('mgmap'), myOptions);</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var locations = [</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><? for ($i=0; $i<count($list); $i++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$name1=strip_tags($list[$i][subject]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$lat=($list[$i][wr_3]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$lng=($list[$i][wr_4]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$address=strip_tags($list[$i][wr_2]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$mapnum=($list[$i][wr_id]);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$mtem="<table><tr><td width=100%><a href={$list[$i][href]}>$name1</a></td></tr><tr><td width=100%>{$address}</td></tr></table>";</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>['<?=$mtem?>', '<?=$lat?>', '<?=$lng?>', '<?=$mapnum?>']</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><? if ($i==count($list)-1) continue; ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span><? } ?></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>];</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>var infowindow = new google.maps.InfoWindow();</p><p> </p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>var marker, i;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var bounds = new google.maps.LatLngBounds();</p><p> </p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>for (i = 0; i < locations.length; i++) {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]); </p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>var marker = new google.maps.Marker({</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>position: myLatLng,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>map: map</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>bounds.extend(myLatLng);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>map.fitBounds(bounds);</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span> <span class="Apple-tab-span" style="white-space:pre"> </span></p><p> </p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>google.maps.event.addListener(marker, 'click', (function(marker, i) {</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>return function() {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>infowindow.setContent(locations[i][0]);</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>infowindow.open(map, marker);</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>})(marker, i));</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>zoomChangeBoundsListener = google.maps.event.addListener(map, "bounds_changed",function(event){ </p><p>if(this.getZoom() > 20) </p><p>this.setZoom(16); </p><p>google.maps.event.removeListener(zoomChangeBoundsListener); </p><p>}); </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>// 성격파틴자님 조언 너무 가까이보일때 적용</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>google.maps.event.addDomListener(window, 'load', mgminfomap);</p><p></script></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span> <?php if ($is_list && $lat != 37.5665) { //리스트검색결과 없을때,주소없을 경우(서울시청 동일 위도) 리스트에 지도 숨김 ?></p><p> <div id="mgmap" style="padding-top:20px;padding-left:20px;padding-bottom:20px;verticul-align:middle; text-align:left;border:10px solid #f3f3f3;"></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span> <?php } ?></p><p>
</p><p> </p><p><!--구글지도 끝 ----------------></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
9년 전
올려주신 코드 무시하고 샘플올리자면
보시고 응용하세요
</p><pre style="margin-top: 0px; margin-bottom: 1em; padding: 5px; border: 0px; font-size: 13px; overflow: auto; width: auto; max-height: 600px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; word-wrap: normal; color: rgb(34, 36, 38); background-color: rgb(238, 238, 238);"><code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; white-space: inherit;">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);</code></pre><p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인