[G4] 구글, 다음 지도 함께 사용하기 > 기술자료 | 해피정닷컴

[G4] 구글, 다음 지도 함께 사용하기 > 기술자료

본문 바로가기

사이트 내 전체검색

[G4] 구글, 다음 지도 함께 사용하기 > 기술자료

그누보드 [G4] 구글, 다음 지도 함께 사용하기

페이지 정보

profile_image
작성자 관리자1 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물
댓글 0건 조회 20,291회 작성일 2012-05-29 04:43:36

본문

저장할때 사용하는 여분필드   wr_9 (주소)


1.그누보드 / skin / board / 스킨 / api.php  생성
 
<?php
  // 다음 지도api 키값
  $daum_map_key = "xxxxx";
 
  // 다음 로컬api 키값
  $daum_local_key = "xxxxx";
?>



2. 그누보드 / skin / board / 스킨 / write.skin.php
 
  <tr>
    <td class=write_head>주소</td>
    <td><?php
 $api_map_address = $write["wr_9"];
?>
    &nbsp;다음 지도: 서울시 구로구 구로3동 851 (번지까지만 입력, 건물명 입력 오류 발생)<br />
    &nbsp;구글지도: 서울시 구로구 구로3동 851 한화비즈메트로1차 1502호 (건물명 입력안해도 검색가능)<br />
      <input name="wr_9" id="api_map_address" itemname="주소" value="<?php echo $api_map_address; ?>" style="width:400px;" class="tx" />
      <!-- 다음 지도 시작-->
      &nbsp;<a href="javascript:confirmMap();" class="button"><span>Daum 지도확인</span></a>
      
      <script type="text/javascript">
      <!--
        function confirmMap() {
          var temp = encodeURI(document.getElementById('api_map_address').value);
          var lo = "<?php echo $board_skin_path; ?>/confirm_map.php?api_map_address="+temp;
          window.open(lo,'cate','scrollbars=yes, width=700, height=600');
        }
      //-->
      </script>
      <!-- 다음 지도 끝 -->
 
    <!-- 구글 지도 시작 -->
    <a href="javascript:win_google_map()" class="button"><span>Google 지도확인</span></a>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" charset='UTF-8'></script>
    <script type="text/javascript">
    <!--
    function google_map(mapid, addr) {
      var geocoder =  new google.maps.Geocoder();
      geocoder.geocode( {'address': addr }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var map = new google.maps.Map(document.getElementById(mapid), {
            zoom: 15,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var marker = new google.maps.Marker({map: map, position: map.getCenter()});
        }
      });
    }
 
    function win_google_map() {
      $("#dialog-map").dialog({
        width: 550,
        autoOpen: false,
        //modal: true,
        resizable: false,
        buttons: {
          "Colse": function () {
            $(this).dialog("close");
          }
        }
      });
      $("#dialog-map").dialog("open");
      $("#google-map").css("display", "block");
      $("#google-map").html("");
      google_map("google-map", $("#api_map_address").val());
 
    }
//-->
    </script>
 
    <div id="dialog-map" class="dialog-content">
      <div id="google-map" style="border:1px solid #999; width:500px; height:300px; margin:10px; display:none;"></div>
    </div>
  <!-- 구글 지도 끝 -->
    </td>
  </tr>
  <tr><td colspan="2" height="1" bgcolor="#dddddd"></td></tr>
 


3. 그누보드 / skin / board / 스킨 / write_update.skin.php




4. 그누보드 / skin / board / 스킨 / view.skin.php

4-1. 지도를 표시하고픈 위치에 아래 코드 추가
 
  <tr>
    <td>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<?php 
$api_map_address = $view["wr_9"];
if ($api_map_address) {
 
include_once "api.php"; // api 키 설정
 
  // 지도 시작
  $daum_map_address = $api_map_address;
  echo "<script type='text/javascript' src='http://apis.daum.net/maps/maps2.js?apikey=". $daum_map_key ."' charset='UTF-8'></script>";
 
  // 지도 안보이면 아래 한줄 주석
  $daum_map_address = iconv("euc-kr","utf-8",$daum_map_address); // euc-kr --> UTF-8 변경
  $daum_map_address = urlencode($daum_map_address);
 
  // 여기부터 주소 검색 xml 파싱
  $daum_pquery =  "apikey=$daum_local_key". "&q=". $daum_map_address . "&output=xml";
 
  $fp = fsockopen ("apis.daum.net", 80, $errno, $errstr, 30); 
  if (!$fp) { 
    echo "$errstr ($errno)"; 
  } else { 
    fputs($fp, "GET /local/geo/addr2coord?"); 
    fputs($fp, $daum_pquery); 
    fputs($fp, " HTTP/1.1\r\n"); 
    fputs($fp, "Host: apis.daum.net\r\n"); 
    fputs($fp, "Connection: Close\r\n\r\n"); 
    
    $header = "";
    while (!feof($fp)) { 
      $out = fgets ($fp,512); 
      if (trim($out) == "") { 
        break; 
      } 
      $header .= $out; 
    } 
    
    $daum_mapbody = ""; 
    while (!feof($fp)) { 
      $out = fgets ($fp,512); 
      $daum_mapbody .= $out; 
    } 
 
    $daum_idx = strpos(strtolower($header), "transfer-encoding: chunked");
 
    if ($daum_idx > -1) { // chunk data 
      $temp = ""; 
      $offset = 0; 
      do { 
        $idx1 = strpos($daum_mapbody, "\r\n", $offset); 
        $chunkLength = hexdec(substr($daum_mapbody, $offset, $idx1 - $offset)); 
        
        if ($chunkLength == 0) { 
          break; 
        } else { 
          $temp .= substr($daum_mapbody, $idx1+2, $chunkLength); 
          $offset = $idx1 + $chunkLength + 4; 
        } 
      } while(true); 
      $daum_mapbody = $temp; 
    }
 
    fclose ($fp); 
  }
  // 여기까지 주소 검색 xml 파싱
 
  // 여기부터 좌표값 변수에 등록
  $daum_map_x_point_1=explode("<lng>", $daum_mapbody); 
  $daum_map_x_point_2=explode("</lng>", $daum_map_x_point_1[1]); 
  $daum_map_x_point=$daum_map_x_point_2[0]; 
 
  $daum_map_y_point_1=explode("<lat>", $daum_mapbody); 
  $daum_map_y_point_2=explode("</lat>", $daum_map_y_point_1[1]); 
  $daum_map_y_point=$daum_map_y_point_2[0]; 
  // 여기까지 좌표값 변수에 등록
 
  echo "주소 : ". $api_map_address ."<br />";
  
  // 좌표 X, Y 찾은경우
  if($daum_map_x_point && $daum_map_y_point) { 
    echo "지도좌표 : x:". $daum_map_y_point ." y:". $daum_map_x_point ."<br />";
 
  // 다음 지도 시작
  echo "<script type='text/javascript' src='http://apis.daum.net/maps/maps3.js?apikey=". $daum_map_key ."'></script>";
?>
<script type="text/javascript">
<!--
  //window.onload = function() {
  var daum_map;
  function initialize_daum() {
 
    daum_map = new daum.maps.Map(document.getElementById('daum_map'), {
      center: new daum.maps.LatLng(<?php echo $daum_map_y_point; ?>,<?php echo $daum_map_x_point; ?>),
      level: 4
    });
 
    var points = [
      new daum.maps.LatLng(<?php echo $daum_map_y_point; ?>,<?php echo $daum_map_x_point; ?>)
    ];
 
    var icon = [
      new daum.maps.MarkerImage(
        'http://i1.daumcdn.net/imap/apis/n_local_blit_04.png',
        new daum.maps.Size(19, 24),
        new daum.maps.Point(16,34),
        "poly",
        "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33"
      )
    ];
 
    //마커 위치 설정
    var marker = [
      new daum.maps.Marker({position: points[0], image: icon[0]})
    ];
    marker[0].setMap(daum_map);
 
  };
//-->
</script>
    <table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
      <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
        <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
          <tr><td bgcolor="#ffffff"><div id="daum_map" style="width:100%; height:500px; z-index:100; border:1px solid #ccc;"></div></td></tr>
        </table></td></tr>
      </table></td></tr>
    </table>
 
<?php 
// 다음 지도 끝
 
 
// 구글 지도 시작
  $google_map_address = $api_map_address;
  echo $google_map_address;
  //$google_map_address = iconv("euc-kr","utf-8",$google_map_address); // euc-kr --> UTF-8 변경
?>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&language=ko"></script>
  <script type="text/javascript">
  <!--
  var map;
  function initialize_google() {
    var myLatlng = new google.maps.LatLng(<?php echo $daum_map_y_point; ?>, <?php echo $daum_map_x_point; ?>);
    var myOptions = {
      zoom: 16,
      scaleControl: true,
 
      navigationControl: true,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
      },
 
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    // 리스너 Listener ////////////////////////////////////////////////////
    google.maps.event.addListener(map, 'zoom_changed', function() {
      zoomLevel = map.getZoom(); 
      if (zoomLevel > 19) { 
        map.setZoom(19); 
      }   
      if (zoomLevel < 1) { 
        map.setZoom(1); 
      }   
    });
 
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "Here"
    });
  } 
  //-->
  </script>
    <table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
      <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
        <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
          <tr><td bgcolor="#ffffff"><div id="map"><div id="map_canvas" style="width:100%; height:500px; border:1px solid #ccc;"></div></div></td></tr>
        </table></td></tr>
      </table></td></tr>
    </table>
  
<?php 
// 구글 지도 Tyle1 끝
 
  // x, y 좌표 없는 경우
  } else {
 
// 구글 지도 Tyle2 시작
  $google_map_address = $api_map_address;
  echo $google_map_address;
  //$google_map_address = iconv("euc-kr","utf-8",$google_map_address); // euc-kr --> UTF-8 변경
?>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript">
  <!--
    function google_map(mapid, addr) {
        var geocoder =  new google.maps.Geocoder();
        geocoder.geocode( {'address': addr }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var map = new google.maps.Map(document.getElementById(mapid), {
                    zoom: 15,
                    center: results[0].geometry.location,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({map: map, position: map.getCenter()});
            }
        });
    }
    /*$(document).ready(function () {
      google_map("google_map", "<?php echo addslashes($google_map_address); ?>");
    });*/
    function initialize_google2() {
      google_map("google_map", "<?php echo addslashes($google_map_address); ?>");
    }
  //-->
  </script>
    <table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
      <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
        <tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
          <tr><td bgcolor="#ffffff"><div id="google_map" style="width:100%; height:500px; border:1px solid #ccc; margin:0 0 0px 0;"></div></td></tr>
        </table></td></tr>
      </table></td></tr>
    </table>
<?php 
// 구글 지도 Tyle2 끝
  }
}
// 지도 끝
?>


4-2. 페이지 최하단에 추가
 
 
<!-- 지도 onload 중복 처리 시작 -->
<script type="text/javascript">
<!--
  <? if ($google_map_address) { ?>
  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
      window.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }
  <? if ($daum_map_x_point && $daum_map_y_point) { ?>
  addLoadEvent(initialize_google);
  addLoadEvent(initialize_daum);
  <? } else { ?>
  addLoadEvent(initialize_google2);
  <?php } } ?>
//-->
</script>

댓글목록

등록된 댓글이 없습니다.


Total 459건 17 페이지
  • RSS
기술자료 목록
139
그누보드   14329  2012-09-23 06:03  
[G4] iframe 에서 로그인후 부모창 열기
138
그누보드   17058  2012-09-20 19:09 ~ 2024-04-03 15:30  
[G4/G5] 운영중인 그누보드 폴더 변경할때
137
그누보드   11533  2012-09-20 18:56  
[G4] 로그인후 warning 메시지가 나올때
136
그누보드   12762  2012-09-19 18:49  
[G4] iframe의 게시판 사용시 배경 투명하게 만들기
135
그누보드   14819  2012-09-12 16:23  
[G4] 글쓰기에서 에디터 HTML 쓰기가 안될때
134
그누보드   14167  2012-06-16 06:20  
[G4] 서버이전후 첨부파일 안올라갈때
133
그누보드   18986  2012-06-01 20:26  
[G4] [보안강화] data 디렉토리에 .htaccess 파일을 생성
열람
그누보드   20291  2012-05-29 04:43  
[G4] 구글, 다음 지도 함께 사용하기
131
그누보드   25509  2012-05-28 17:03  
[G4] 구글 지도 API 연동 PHP 소스
130
그누보드   40004  2012-05-26 17:54 ~ 2021-10-21 23:12  
alert 메세지 출력후 창닫기
129
그누보드   18386  2012-05-01 22:12  
[G4] 소셜 미디어(SNS)로 웹페이지 링크보내기
128
그누보드   10893  2012-04-23 11:44  
[G4] 연혁게시판
127
그누보드   14796  2012-04-13 13:27  
[G4] 첨부화일 이미지 클릭/팝업 제어
126
그누보드   12944  2012-04-30 22:42  
[G4] [최신글] 미니달력
125
그누보드   9179  2013-04-29 14:50  
[G4] [최신글] 팝업존
124
그누보드   11525  2012-02-27 14:09  
[G4] 목록 이름 마우스 오버할때 아이디 안보이기
123
그누보드   15568  2012-02-12 23:59  
[G4] 다운로드 링크를 다른곳에서 사용하기
122
그누보드   12478  2012-02-10 22:14 ~ 2016-11-21 00:00  
[공통] 동영상 게시판 작동이 안될때
121
그누보드   13289  2011-09-02 10:12 ~ 2017-09-01 00:00  
[G4/G5] 아웃로그인 실명이름 보이기
120
그누보드   22602  2011-08-04 22:57  
[G4] Warning: Cannot modify header information - headers alr…

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.