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.250943127.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.250943127.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.250943127.028344),
        zoom:9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapProp2 = {
        center: new google.maps.LatLng(37.250943127.028344),
        zoom:9,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };
      var mapProp3 = {
        center: new google.maps.LatLng(37.250943127.028344),
        zoom:9,
        mapTypeId: google.maps.MapTypeId.HYBRID
      };
      var mapProp4 = {
        center: new google.maps.LatLng(37.250943127.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'를 통해 작성하였습니다.

    댓글

Designed by Tistory.