react - kakao map local에서는 되지만 netlify배포후 안뜨는 오류 해결방법

juliekim·2021년 2월 3일
0

리액트

목록 보기
1/1

index.html

타이틀 You need to enable JavaScript to run this app.
<div id="root"></div>

<!-- <div id='map' style='width: 100%;
height: 300px;'></div>
<script type="text/javascript">
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
    level: 3 //지도의 레벨(확대, 축소 정도)
 };

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

</script>
 -->

kakaomap.js

/*global kakao */
import React, { useEffect } from "react";
import styled from "styled-components";

const Location = styled.div width: 100%; height: 300px; position: relative; margin-bottom: 100px;;

// const script = document.createElement("script");
// script.async = true;
// script.src = "/km.js?apikey=본인키값";
// // alert(script.src);
// document.head.appendChild(script);
// alert(script.innerText);

export default function GenerateMap() {
useEffect(() => {
mapscript();
}, []);

const mapscript = () => {
/*
const script = document.createElement("script");
script.async = true;
script.src = "/km.js?apikey=본인키값";
document.head.appendChild(script);
*/

let container = document.getElementById("map");
// alert(window);
let options = {
  center: new kakao.maps.LatLng(37.47226318266345, 126.88421079198216),
  level: 5,
};
// const script = document.createElement("script");
// script.async = true;
// script.src =
//   "/km.js?appkey=본인키값=false";

//map
const map = new kakao.maps.Map(container, options);

//마커가 표시 될 위치
let markerPosition = new kakao.maps.LatLng(
  37.62197524055062,
  127.16017523675508
);

// 마커를 생성
let marker = new kakao.maps.Marker({
  position: map.getCenter(),
});

// 마커를 지도 위에 표시
marker.setMap(map);

};

return (
<div style={{ marginTop: "150px", textAlign: "center" }}>

LOCATION


<div
style={{
display: "block",
position: "relative",
justifyContent: "center",
}}
>
<div
className="detail"
style={{
// fontSize: "18px",
lineHeight: "18px",
color: "#1e1e1e",
position: "relative",
fontWeight: "bold",
textAlign: "center",
}}
>

카카오본사


주소 : 서울특별시 금천구 블라블라


전화 : 02-1212-2154



<div id="map" style={{ width: "100%", height: "300px" }}>


);
}

index.html에서 중요한 부분은 이 밑의 키값을 본인이 자바스크립트를 저장한 경로에 맞추고 apikey=키값을넣는것

kakaomap.js 에서는 객체랑 위치좌표값만 넣고 생성해주면된다.

export default function GenerateMap() {
useEffect(() => {
mapscript();
}, []);
const mapscript = () => {
let container = document.getElementById("map");
// alert(window);
let options = {
center: new kakao.maps.LatLng(37.471216266345, 126.884210456416),
level: 5,
};
const map = new kakao.maps.Map(container, options);

//마커가 표시 될 위치
let markerPosition = new kakao.maps.LatLng(
  37.62197524055062,
  127.16017523675508
);

// 마커를 생성
let marker = new kakao.maps.Marker({
  position: map.getCenter(),
});

// 마커를 지도 위에 표시
marker.setMap(map);

};

인터넷에 나와있는 방법대로 다해봤는데 local에서는 잘만 나오던것이 Netlify로 배포하면 빈 공백으로뜬다..
문제는 function에서 kakao.map의 map을 찾을수없는 오류.
결국 카카오맵을 key값으로 불러오는 주소값으로 들어가서 자바스크립트를 public안에 저장하고 index.html에서 스크립트를 부를때 키값 앞의 주소를 바꾸면 된다.

profile
코딩비기너

관심 있을 만한 포스트

0개의 댓글

관심 있을 만한 포스트