기획한 프로젝트에서 가장 까다로웠던 부분은 지도에 저장한 데이터로 포인트를 찍는 것이었다.
갓구글에서는 API 데이터를 제공하지 않을까? 하는 생각에 구글링을 좀 해봤고
꽤 쉽게 관련된 정보를 얻을 수 있었다!!
https://lcw126.tistory.com/192
HTML+Java script (기초) geolocation Google Map Api 이용 (웹페이지에서 지도 보여주기)
<최종 화면> 블로그에서 음식점을 리뷰하고 거기 위치를 마커로 표시하는 것을 봤을 것이다. 그것처럼 브라우저에서 지도를 표시해보자. 우선 지도 API를 이용해야한다. 네이버-유료, 카카오-부
lcw126.tistory.com
잘 정리 되어있는 블로그 끌어오기
다만 위의 블로그에서는 웹페이지를 아예 새로 만들면서 구글맵을 끼워넣는 형식이라
만들어놓은 웹페이지에 구글맵을 깔고싶은 나랑은 아아아아아주 약간 달랐다
시도해본 결과 헤드 부분, style 아래, script 아래에 각각의 코드들을 붙여주면 됐다
아 style에 width랑 margin, initMap function 안에 zoom 값은 내가 웹페이지에 맞춰서 설정을 했다
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=개인API키&callback=initMap&libraries=&v=weekly"async></script>
<style>
#map {
height: 400px;
/* The height is 400 pixels */
width: 70%;
/* The width is the width of the web page */
display: flex;
margin: 20px auto 0px auto;
}
</style>
<script>
function initMap() {
// The location
const uluru = { lat: 37.558714, lng: 126.790467 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
<script>
</head>그리고 body 부분에는 아래의 코드를 붙여줘야 했다.
Map을 붙이고 싶은 위치에다가 넣어주면 된다
<body>
<div id="map">
</div>
</body>
배운 점은 id에 대해 스타일 지정을 할 때에는 .으로 ID를 호출하는 게 아니라 #을 이용해야 한다는 점.
앞으로 시도해보고 싶은 것은
1. DB에서 가져온 데이터를 구글맵상에 표출되도록 하기
머리로는 initMap function에 ajax를 추가해준 후
데이터에서 가져온 longtitude, latitude를 const uluru = { lat: 37.558714, lng: 126.790467 };
이 안에 ${long} 머 이렇게 붙이면 될 것 같은데
해보니 안됐음... ㅠㅠ
2. 마커 붙이기
맨 위에 올린 블로그 보면
- 마커 붙이는 법
- 여러 개의 마커를 표시해주는 법
도 나와있던데
그 중 내가 구현하고 싶은 기능은 여러 개의 마커를 표시하는 기능이다!
근데 자세히 보니 일단 마커를 붙인 후에 여러 개의 마커를 표시하는 쪽으로 발전시켜야 하는듯ㅋㅋㅋㅋ
암턴...
var pharmacys = [ ['희망약국', 위도, 경도] ['이수프라자약국', 위도, 경도] ]
뭐 이런 식으로 변수를 만든 후에 for 문을 이용하여 읽어오는 형태로 구현을 하면 되던데
그러면 DB 상의 데이터들을 같은 방식으로 for 문 돌려서 만들 수 있는거 아닐까,,,???
일단 1차적으로, ajax를 통해 DB에서 가져온 데이터를 표출시키는 것부터 연습해봐야겠다.
뜐뜐뜐,,,
아 visual studio code에서 html 주석을 다는 방법을 계속 찾아보는데 계속 안된다ㅠㅠ
'Development > Web development' 카테고리의 다른 글
| 웹개발 프로젝트 : (4) 웹페이지 1차 완성 (0) | 2022.02.23 |
|---|---|
| 웹개발 프로젝트 : (3) 지도 위치 바꾸기 (0) | 2022.02.22 |
| 웹개발 프로젝트 : (1) 기획안 (0) | 2022.02.14 |
| 웹개발 5주차 : 서버 업로드 (0) | 2022.02.11 |
| 웹개발 4주차 : POST & GET (0) | 2022.02.04 |