{@ 태그에 닫는 태그가 없습니다. error :320 [지도API] [구글 지도3.0] 위치(마크) 여러개를 표시하는 방법
Customer Satisfaction
고객만족센터
친절하고 빠른 응대와 실시간 정보공유로
최적화된 의사 소통의 공간과 정보제공의 장을 제공해 드립니다.

FAQ

FAQ

솔루션을 이용하는 회원님들이 가장 많이 문의하시는 내용.

게시글 검색
[지도API] [구글 지도3.0] 위치(마크) 여러개를 표시하는 방법
조회수:1834
2020-08-26 11:37:10

 

* 구글지도 3.0은 익스플로어10 미만 에서는 정상 작동 되지 않을수 있으니 유념하시기 바랍니다.

 

* 익스프로어10 이상 이라 하더라도, [호환성보기]모드인 경우 정상 작동 되지 않습니다. 확인해보려면 인스플로어에서 F12 키를 누르면 우측 상단 - 브라우져 모드에서 확인 가능 합니다.

 

* 문서 모드가  쿼크모드인 경우 작동되지 않습니다. 관리자 모드 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 DOCTYPE이 XHTML1.0 또는 HTML5인 경우에만 정상 작동 됩니다.

 

 

 * 지도 출력 은 기본적으로 phpx 문법을 아시면 더욱 유연하게 커스터마이징 하실 수 있습니다.
 * 원문 출처 : https://developers.google.com/maps/documentation/javascript/examples/event-closure


 

(<load target="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">

{@
$marker_array = array();
$marker_array[] = array(-25.363882, 131.044922, "우리집");
$marker_array[] = array(-26.363882, 132.044922, "판타지아");
$marker_array[] = array(-27.363882, 133.044922, "치킨집");
@}

<script>
function initialize() {
 var mapOptions = {
  zoom: 4,
  center: new google.maps.LatLng(-25.363882, 131.044922)
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 marker_chk(map);
}

function marker_chk(map){
 
 <!--@foreach($marker_array as $k => $v)-->
  var position = new google.maps.LatLng({$v[0]}, {$v[1]});
  var marker{$k} = new google.maps.Marker({
   position: position,
   map: map
  });
  var infowindow{$k} = new google.maps.InfoWindow({
   content: "{$v[2]}"
  });
  infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  google.maps.event.addListener(marker{$k}, 'click', function() {
   infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  });
 <!--@end-->
 
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%;height:400px"></div>)

 

결과 화면 : http://wdev.kellycompany.kr/page/g_multi

 

 

게시글 검색
  • 번호
    제목
    날짜
    조회수
1 2 3 4 5 6 7 8 9 10 ››