[jQuery] google maps api 예제

google maps open api를 이용하여 지도를 출력하는 예제를 포스팅한다.

google maps api key 발급

google maps open api를 이용하기 위해서는 google 계정으로 로그인한 뒤 key를 발급 받아야한다.

트래픽이 많지 않으면 무료로 이용할 수 있으며 유료 전환은 수동이므로 걱정하지 말자.

아래 링크로 접속 후 계정에 신용카드만 등록해 놓으면 oepn api key를 발급 받을 수 있다.

https://console.cloud.google.com/home/dashboard

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

google maps api 예제

지도의 중앙에 영국 런던을 나타내는 예제이다.

key= 뒤에 있는 ? 자리에 본인의 google api key를 붙여 넣기 해야 아래 예제를 실행할 수 있다.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>google maps</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<style>
</style>
</head>
<body>
<div id="googleMap" style="width: 100%; height: 400px;"></div>
<script>
   function myMap(){
      // 2-2. 구글 맵의 옵션 
      var mapOptions = { 
            // 지도의 중앙 위치 : 영국 런던
            center:new google.maps.LatLng(51.508742, -0.120850)
            // 줌 레벨 : 5
               , zoom:5
      };
      
      // 2. 구글 지도 생성(만들기)
      // var map = new google.maps.Map(맵캔버스, 맵옵션들 );
      var map = new google.maps.Map( 
             document.getElementById("googleMap") 
            , mapOptions );
   }
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=?&callback=myMap"></script>
</body>
</html>