ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Google Maps] 2. 구글 맵스 기본 - 구글 맵 API 강좌
      Web/Google Maps 2016. 2. 28. 15:07

      W3School 를 참고하여 작성하는 Google Map API 강좌입니다.


      구성은 아래와 같습니다. 아래 링크를 통해서 하나하나 익히시면 됩니다.



      구글 맵 API 기본(Basic)

      구글 맵 API 오버레이(Overlays)

      구글 맵 API 이벤트(Events)

      구글 맵 API 제어(Controls)

      구글 맵 API 타입(Types)




      Google Maps Basic

       

       Create a Basic Google Map

        아래 예제 코드는 한국을 기준으로 구글 맵을 생성하였습니다.


        직접 코드를 입력해서 실행해보세요.



       * googlemaps.html


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html>
      <head>
      <script src="http://maps.googleapis.com/maps/api/js"></script>
      <script>
      function initialize() {
        var mapProp = {
          center:new google.maps.LatLng(37.250943, 127.028344),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
       
      <body>
      <div id="googleMap" style="width:500px;height:380px;"></div>
      </body>
       
      </html>
      		cs












        그럼 하나하나 설명하도록 하겠습니다.




       1. Load the Google API

        구글 맵스 API는 자바스크립트 라이브러리(JavaScript library)입니다. <script> 태그를 통해서 웹 페이지에 추가 가능합니다.


      1
      <script src="http://maps.googleapis.com/maps/api/js"></script>
      		cs





       2. Set Map Properties

        맵을 초기화해주기 위한 함수(function)를 만듭니다.


      1
      function initialize() {}
      		cs


        초기화 함수안에, 맵의 속성(properties)을 정의할 객체(mapProp)을 생성합니다.


      1
      2
      3
      4
      5
        var mapProp = {
          center:new google.maps.LatLng(37.250943, 127.028344),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
      		cs



        center 속성은 맵의 중심을 어디로 할지 정의합니다. LatLng 객체를 생성하여 맵에 특정 포인트를 정합니다. 


        zoom 속성은 맵에서의 줌 레벨을 정의합니다. 


        mapTypeId 속성은 화면에 표시될 맵 타입을 정의합니다. 아래 나오는 맵 타입을 지원합니다:

        - Roadmap(normal, default 2D map)

        - Satellite(photographic map)

        - Hybrid(photographic map + roads and city names)

        - Terrain(map with mountains, rivers, etc.)





       3. Create a Map Container

        맵을 담기 위한 <div>태그를 생성합니다. CSS를 사용하여 사이즈를 설정합니다.


      1
      <div id="googleMap" style="width:500px;height:380px;"></div>
      		cs




       4. Create a Map Object

        


      1
        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
      		cs



        위 코드는 id가 'googleMap'인 <div> 태그 안에 새로운 맵을 만드는 코드입니다. 파라미터인 mapProp을 이용해서 말이죠.



       5. Add an Event Listener to Load the Map

        DOM 리스너를 추가하여 페이지가 로드될 때, initialize() 함수가 실행되게 합니다.


      1
      2
      google.maps.event.addDomListener(window, 'load', initialize);
       
      		cs






       Multiple Maps

        아래 예제는 하나의 웹 페이지에 4개의 맵을 생성하는 예제입니다.



       * fourmaps.html


      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
       
      <!DOCTYPE html>
      <html>
      <head>
      <script
      src="http://maps.googleapis.com/maps/api/js">
      </script>
       
      <script>
      function initialize()
      {
        var mapProp = {
          center: new google.maps.LatLng(37.250943, 127.028344),
          zoom:9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var mapProp2 = {
          center: new google.maps.LatLng(37.250943, 127.028344),
          zoom:9,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        var mapProp3 = {
          center: new google.maps.LatLng(37.250943, 127.028344),
          zoom:9,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var mapProp4 = {
          center: new google.maps.LatLng(37.250943, 127.028344),
          zoom:9,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
        var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
        var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
      }
       
      google.maps.event.addDomListener(window, 'load', initialize);
      </script>
      </head>
       
      <body>
      <div id="googleMap" style="width:400px;height:300px;"></div>
      <br>
      <div id="googleMap2" style="width:400px;height:300px;"></div>
      <br>
      <div id="googleMap3" style="width:400px;height:300px;"></div>
      <br>
      <div id="googleMap4" style="width:400px;height:300px;"></div>
       
      </body>
      </html>
       
      		cs






       Google API Key

        구글은 어떤 구글 API 든 웹 사이트에 불러올 수 있게 해줍니다.


        만약 과다 트래픽을 위한 계획이 있다면, 구글로부터 무료 API 키를 얻길 바랍니다.


        https://console.developers.google.com 이 링크에서 받길 바랍니다.


        발급받은 키를 아래와 같이 사용하시길 바랍니다.



      1
      2
      3
       
      <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
       
      		cs






      end



      * 이 포스팅은 'w3school'를 통해 작성하였습니다.

      저작자표시

      'Web > Google Maps' 카테고리의 다른 글

      [Google Maps] 6. 구글 맵스 타입(Types) - 구글 맵 API 강좌  (0) 2016.02.29
      [Google Maps] 5. 구글 맵스 제어(Controls) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 4. 구글 맵스 이벤트(Events) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 3. 구글 맵스 오버레이(Overlays) - 구글 맵 API 강좌  (0) 2016.02.28
      [Google Maps] 1. 개요(Tutorial) - 구글 맵 API 강좌  (0) 2016.02.28

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바