ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (HTML/CSS/JS) Google Map API를 사용해보자!
      HTML CSS JS 2021. 8. 20. 14:51

      구글 API를 사용해서 내가 만든 페이지에 구글 지도와 기능들을 추가해보자!

      API를 사용하기 위해서는 먼저 Key를 받아와야 한다.

      https://webruden.tistory.com/378 

       

      구글맵 API Key 간단하게 발급받는 방법 (Get an API Key | Maps JavaScript API)

      웹사이트에서 구글 지도를 사용하기 위해서는 구글 지도 API 키를 발급받아야 합니다. 구글맵을 사용하기 위한 Maps JavaScript API 설정과 API 키 발급 과정에 대해서 설명하도록 하겠습니다. 과정은

      webruden.tistory.com

      (잘 정리되어 있으니 참고해서 Key를 발급받아보자!)

       

      Key를 발급 받았다면 API 문서를 참고해서 코드를 작성만 하면 지도를 불러올 수 있다!

      https://developers.google.com/maps/documentation/javascript/overview

       

      Overview  |  Maps JavaScript API  |  Google Developers

      Get started with the Google Maps JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.

      developers.google.com

      (구글에서 제공하는 API 공식 문서)

       

      이런식으로 코드 예시도 있다. 복붙도 가능!

       

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>맵 API</title>
      <style type="text/css">
       
          *{
              margin: 5px;
              padding: 5px;
          }
          #map{
              border: 2px solid blue;
              width: 500px;
              height: 300px;
          }
       
      </style>
      <!-- <script src="http://maps.google.com/maps/api/js?key=자기가발급한키를입력&region=kr"></script> -->
      <script src="http://maps.google.com/maps/api/js?key=자기가발급한키&region=kr"></script>
      </head>
       
      <body>
          <div id="map"></div>
          <button id="btn1">지도 변경1</button>
          <button id="btn2">지도 변경2</button>
          <button id="btn3">거리뷰</button>
          
          <script type="text/javascript">
              
              // 버튼들 불러와서 변수에 담아주고
              var btn1 = document.getElementById("btn1");
              var btn2 = document.getElementById("btn2");
              var btn3 = document.getElementById("btn3");
              // 각각 버튼에 이벤트 추가
              btn1.addEventListener("click", changeMap1);
              btn2.addEventListener("click", changeMap2);
              btn3.addEventListener("click", changeMap3);
              
          
              var map;
              // 지도 출력
              function initMap(){
                  // 위치데이터 경도, 위도로 구성된 jso 파일은 항상 이런식으로 구성되어있다.
                  var ll = {lat: 37.500624, lng: 127.036268};
                  map = new google.maps.Map(
                          document.getElementById("map"),
                          {zoom: 17, center: ll}
                          );
                  new google.maps.Marker(
                      {position: ll,
                          map: map,
                          label: "현재 위치"}        
                  );
              }
              initMap(); // 맵 생성
              
              // 지도의 중심을 변경하는 작업
              function changeMap1(){
                  var ll = {lat:35.661625, lng: 125.239803};
                  map.panTo(ll);
                  map.setZoom(16);
              } 
              // 새로운 지도를 여는 작업 -> 마커 지워짐
              function changeMap2(){
                  var ll = {lat:-40.339098, lng: 175.609729};
                  map = new google.maps.Map(
                          document.getElementById("map"),
                          {zoom:17, center: ll}
                          );
              }
              // 거리뷰를 새창으로 보여주는 작업
              function changeMap3(){
                  window.open('pano.html','',width=300,height=300);
              }
          </script>
      </body>
      </html>
      		 cs

      - 키는 자신의 키로 넣어주시면 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
       
      <style>
          #pano{
              width:100%;
              height:600px;
              
          }
      </style>
      <script src="http://maps.google.com/maps/api/js?key=자신의Key&region=kr"></script>
      </head>
      <body>
          <div id="map"></div>
          <div id="pano"></div>
       
       
      <script type="text/javascript">
          var map;
          
          // 거리뷰 출력
          function initMap(){
              var ll = {lat: 37.500624, lng: 127.036268};
              map = new google.maps.Map(
                      document.getElementById("map"),
                      {zoom: 17, center: ll}
                      );
              var panorama = new google.maps.StreetViewPanorama(
                      document.getElementById("pano"),
                      {
                        position: ll,
                        pov: {
                          heading: 34,
                          pitch: 10,
                        },
                      }
                    );
              map.setStreetView(panorama);
          }
          initMap(); 
       
      </script>
      </body>
      </html>
      		 cs

      (거리뷰는 새 창으로 여는데 그 때 열어줄 pano.html 파일)

       

       

      처음 화면
      지도 변경 옵션을 누르면 지정된 다른 위치의 지도를 보여주고
      거리뷰 버튼을 누르면 새 창으로 거리뷰를 띄워준다.

       

      저작자표시

      'HTML CSS JS' 카테고리의 다른 글

      (HTML/CSS/JS) 사진 갤러리 만들기  (1) 2021.08.17
      (HTML/CSS/JS) Jquery를 이용한 반응형 메뉴판 만들기  (0) 2021.08.17
      (HTML/CSS/JS) 간단한 이벤트 처리 해보기!  (0) 2021.08.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바