[Nuxt3] API Key 없이 iframe으로 구글 지도 넣기

쿼카쿼카·2023년 3월 4일
0

Vue / Nuxt

목록 보기
29/35
post-custom-banner

코드

<iframe
  id="gmap_canvas"
  style="width: 350px; height: 400px"
  frameborder="0"
  scrolling="no"
  marginheight="0"
  marginwidth="0"
  src="https://maps.google.com/maps?q=37.48605462939427, 127.12102860272175&hl=ko&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
        >

<!-- 1. 구글지도에서 원하는 위치 선택 -->
<!-- 2. 공유 클릭 후 지도 퍼가기에서 소스 복사 -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6325.911338592394!2d126.92738129723939!3d37.55610821374598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9895bea3fd83%3A0x6ac3e5ae92cba9b0!2z7Iug7LSM!5e0!3m2!1sko!2skr!4v1677909436587!5m2!1sko!2skr"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy" referrerpolicy="no-referrer-when-downgrade"
></iframe>

첫 iframe

  • width, height로 스타일 안 바껴요!!! 우선순위를 높여주기 위해 style에 담아 width와 hegith를 조정했어요! 퍼블리셔님은 천재인가....?

  • frameborder: 테두리 없애기!!!!!
  • scrolling: no로 설정하여 쓸데없는 스크롤 없애기
  • margin: 말 그대로 여백의 미
  • src: 구글 지도에 좌표 찍으면 나오는데 대충 위도 경도 기타 등등이 들어있어요.

그래서 src 어떻게 구해오냐구~~

두 번째 iframe

  • 구글 행님이 도움을 주면 다 가능하다아아
  • 구글 지도에서 원하는 좌표 찍고 공유 버튼 누른 후 지도 퍼가기 누르면!!! 따란!!
  • 나온 코드 그대로 복사해주면 된다구요~~
  • 대신 style은 따로 변경해주기!!
profile
쿼카에요
post-custom-banner

0개의 댓글