[python] Flask와 Google Maps API를 연동하여 지도 서비스 구현 방법
이번에는 Flask 웹 애플리케이션에서 Google Maps API를 사용하여 지도 서비스를 구현해보겠습니다.
준비물
- Google Cloud Console에 등록된 프로젝트
- Google Maps JavaScript API 키
단계별 구현
1. Flask 애플리케이션 생성
먼저, Flask를 사용하여 웹 애플리케이션을 생성합니다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
2. HTML 파일 생성
templates 폴더에 index.html 파일을 생성하고, Google Maps API를 통해 지도를 나타내는 코드를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Google Maps API Example</h1>
<div id="map"></div>
<script>
function initMap() {
var location = {lat: -34.397, lng: 150.644};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: location
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
3. Google Maps API 키 설정
Google Cloud Console에서 생성한 Google Maps JavaScript API 키를 사용하여 API를 호출합니다.
4. 애플리케이션 실행
Flask 애플리케이션을 실행하고 웹 브라우저에서 http://localhost:5000을 엽니다. 지도가 표시되는지 확인합니다.
이제, Flask와 Google Maps API를 연동하여 간단한 지도 서비스를 구현할 수 있었습니다.