[7기 노코드B방] 네이버 지도 랜딩페이지에 임베드하기 (2) (Framer)

지난 [7기 노코드B방] 네이버 지도 랜딩페이지에 임베드하기에서 실패했던 ‘마커와 인포 윈도우 기본 생성(지명/주소/대표 이미지)’을 랜딩페이지에 구현하는데 성공했습니다. (아래 이미지)

[7기 노코드B방] 네이버 지도 랜딩페이지에 임베드하기에서 처럼 Embed Block에 전체 코드를 모두 입력하는 게 아니라, Embed Block에는 id=map인 비어있는 상자만 만들고, 네이버 지도 API에서 가져온 정보를 아래 이미지에서 보이듯이 이 상자 안에 쏴주는 개념입니다.

방법

GPT를 활용해서 코드를 만드는 방법은 이전 게시물의 내용과 같습니다.

(1) Embed Block에 ID=Map인 상자를 만든다.

(2) Custom Code에서 <head>와 <body> 각각에 네이버 지도 API를 넣는다

  • Framer > Page Setting > Custom Code

  • <head>

    • Java Script 설정 값

    • style

  • <body>

    • 지명/주소/이미지

    • Marker / Info window 정보

※ 이미지 URL을 입력할 때, 주의해야할 점이 있습니다

  • url 상에서 끝부분에 .png 또는 .jpg 와 같은 확장자 명이 있어야 됩니다

1
2개의 답글

👉 이 게시글도 읽어보세요