구글맵 API 사용하기

Explanation

참고링크 :
https://developers.google.com/maps/documentation/javascript/

– 모든 정보는 Google Developers 사이트에서 친절한 번역과 함께 제공하고 있습니다.

2015.06.10 추가사항

생각보다 많은 분들이 포스트를 봐주셔서… 두개 이상 마커를 표시하는 방법을 추가하였습니다.

2017.03.24 추가사항

‘구글지도원츄’님이 말씀해주신 API KEY로 구글맵를 사용하는 방법을 추가하였습니다.

 

1. 기본설정

1-1. 일반

1-2. 워드프레스

[‘&region=KR’ // ‘동해’, ‘독도’의 표기를 위한 설정입니다.]

1-3. 구글맵 태그

 

2. 구글맵 자바스크립트 API

2-1. Javascript API

2-2. 그 밖의 구글맵 옵션

이 밖의 모든 옵션 :
https://developers.google.com/maps/documentation/javascript/reference#MapOptions

 

3. 구글맵 날씨 API

구글맵 날씨 사용하기

날씨 예제 보기 :
https://developers.google.com/maps/documentation/javascript/examples/layer-weather

 

4. 구글맵 스타일 API

구글맵 스타일 사용하기

포토샵의 ‘Adjustments’ -> ‘Hue/Saturation’ 기능을 참고하여 사용하면 좋을거 같다.
[※스타일 기능을 사용할 경우 한국내의 지도정보는 나타나지 않습니다.]

스타일 레퍼런스 :
https://developers.google.com/maps/documentation/javascript/styling

5. 구글맵 마커 추가

구글맵에 2개의 마커 사용하기

6. API KEY로 구글맵 불러오기

API KEY로 구글맵 불러오기

 
 

sh님 대략적인 전체 구조는 아래와 같습니다.

 

잘못된 정보가 있다면 댓글로 남겨주시면 감사하겠습니다 :)

Leave a Reply

  1. 구글지도원츄

    헉..댓글에 스크립트 주소를 넣으니깐 확 사라지네요.. 이거 뭐 댓글 수정도 안되고 삭제도 안되네요ㅠㅠㅠ
    댓글 폭탄이 될듯합니다.. 죄송합니다~

    일단 하단에 제가 남긴 댓글 참고부분입니다.. 구글 지도 API 사용관련 예제사이트입니다..
    https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=ko

    자바스크립트+HTML 부분을 누르시면 해당예제의 하단에 스크립트부분이 있습니다.
    API KEY는 아래와 같이 등록하면 되구요.. 예제사이트에서 callback=initMap 이부분이 initMap부분에
    Cheolguso님이 initialize를 등록해주심 됩니다..

    그다음… 마지막은 아래 댓글과 같습니다..

    • 안녕하세요. ‘구글지도원츄’님
      제가 게을러서 확인이 너무 늦었네요. 죄송합니다.
      이렇게 친절히 문제의 상황과 그에 따른 해결방법까지 적어주셔서 너무 감사드립니다!!
      말씀해주신 부분은 포스트에 추가 기입하도록 하겠습니다 :)

  2. 구글지도원츄

    아래 질문댓글을 달았는데. 하다보니 성공했네요^^.. 혹시나 찾는분들을 위해 댓글을 남깁니다.
    Cheolguso님이 만들어주신 예제 중에 대신 API KEY를 기입할 수 있는 스크립트로 변경합니다..

    YOUR_API_KEY에 발급받은 API 키를 기입하시면 되며 LOAD_MAP_FUNCTION 이 부분이 지도를 불러오는 부분입니다.
    여기에 해당함수를 기입하시면 됩니다.. 즉 initialize를 기입하시면됩니다..
    initialize는 Cheolguso님이 만들어주신 예제의 지도로드함수입니다…

    마지막으로 google.maps.event.addDomListener(window, ‘load’, initialize); 이부분을 주석처리 해주시면..
    API KEY를 이용하여 지도를 로드할 수 있습니다…

  3. 구글지도원츄

    안녕하세요. 혹시 api key는 어디에 기입하는지 아시나요? node js 기반으로 웹앱을 만들고있는데요.
    현재 이 예제와 같이 했더니 경고문구가 뜨네요.. 근데 지도 로드는 되네요.. ㅎㅎ;

  4. 열심히하는일학년

    안녕하세요 이번에 API 처음 배우는데 지도까지 불렀는데 마커를 추가를하면 데이터베이스엔 저장이되는데 페이지를 새로고침할경우 마커가 안뜨더라고요ㅠㅠㅠ이거 왜이럴까요?

    • 안녕하세요 일학년님,
      도움이 되어 드리고 싶지만.. 말씀하신 글 만으로는 어떠한 상황인지 알 수가 없네요 ㅠ

  5. featur

    지나가는 나그네 입니다.

    깔끔하게 정리된 글 잘 보았습니다.

    2. 구글맵 자바스크립트 API

    2-1. Javascript API

    예제의 맨 밑 jquery end 에서 ); 가 빠진것 같습니다.

    • 안녕하세요! 이런.. 한참을 모르고 있었네요.. 감사합니다 :D

  6. sh

    구글맵 API를 사용하고싶어서 찾아보다가 좋은 글이 있어서 해볼려고 하는데요
    그 서버에 API를 올리고 싶어서 그런데요
    sudo nano /var/www/ DOCTYPE.html 이렇게 해서 거기다가 소스를 쳐주면 되는건가요?
    sudo nano /var/www/ funtions.php

    구글맵 테그랑 자바스크립트는.. 어떤 파일에 코딩을 해줘야할까요??? API도 처음이고 라즈베리도 처음이라 모르는게 너무 많아서요… 죄송합니다 ㅠㅠ

    • 안녕하세요?! 처음에 글을 단순히 메모용으로 적다보니 너무 밑도 끝도 없네요…
      우선… nano나 vi로 추가하실 html 또는 php 파일에 접근하셔서
      ( 참고 – 본문 마지막 [댓글에는 태그가 적히지 않아서 본문 가장 아래에 추가하였습니다] )
      이런 구조로 작성하시면 됩니다 ~
      제가 댓글 남겨주신 부분을 잘 이해하고 맞게 답을 드린건지 잘 모르겠네요 ㅠ

  7. vomvoru

    id=”google-map” >> id=”google_map”
    댓글 수정이 안되네요? ㅠㅠ 댓그에 태그형식이 있으면 없어지구요 ㅠㅠ
    이거 이걸로 고쳐주세요. 사이트 디자인에 영감을 많이 얻고 갑니다.

    • 이런… 큰 실수가 있었네요. 이렇게 문제점도 남겨주시고,
      부족함이 많은 사이트임에도 좋게 봐주셔서 감사합니다 :D