반응형
추후 버스정보조회 앱 서비스 프로젝트에서 "해당노선 버스들의 위치"를 표시하기 위해 구글 Maps API를 이용해서 원하는 좌표를 주고 해당 위치에 마커표시를 해봤습니다.
설명보단 코드를 보시면 이해가 되실겁니다.
아래의 코드를 사용하시기 전에 아래의 사이트에서 API키를 발급받으셔야 합니다.
https://cloud.google.com/maps-platform/
Geolocation API | Google Maps Platform | Google Cloud
Google Maps Platform을 선택하면 정확한 실시간 데이터 및 동적 이미지로 몰입형 위치정보 활용 환경을 만들고 더 나은 비즈니스 의사결정을 내릴 수 있습니다.
cloud.google.com
<index.html>
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style type="text/css">
/* Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 37.5407622, lng: 127.0706095 },
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
map: map,
label: locations[i].place,
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
});
}
}
const locations = [
{ place:"건대입구역", lat: 37.539922, lng: 127.070609 },
{ place:"어린이대공원역", lat: 37.547263, lng: 127.074181 },
];
</script>
</head>
<body>
<h3>구글 맵</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=발급받은API키&callback=initMap&libraries=&v=weekly"
async></script>
</body>
</html>
<구글맵 튜토리얼>
developers.google.com/maps/documentation/javascript/tutorials?hl=ko
Tutorials | Maps JavaScript API | Google Developers
반응형
'💻IT' 카테고리의 다른 글
| [Kakao Maps API] 카카오 맵 API 지도 마커표시 예제 (0) | 2021.05.01 |
|---|---|
| [Naver Maps API] 네이버 맵 API 지도 마커표시 예제 (0) | 2021.05.01 |
| [Google Maps API] Google 지도를 제대로 로드할 수 없습니다. 해결 방법 (1) | 2021.04.30 |
| RESTful API 의미와 설계 규칙 (4) | 2021.04.15 |
| 주니어 개발자 취업을 위한 포트폴리오 제작 #1 (2) | 2021.04.13 |