낭만 프로그래머

gmap3를 이용하여 웹페이지에 Google Map API 사용하기 본문

Javascript

gmap3를 이용하여 웹페이지에 Google Map API 사용하기

조영래 2020. 4. 23. 12:59

웹페이지에 Google Map API를 간단히 사용할 수 있는 gmap3라는 javascript 라이브러리를 소개한다.

1. gmap3를 이용하기 위해서는 Google Map API Key가 필요하다. 없을 시에는 발급을 받도록 하자

 

구글 지도 API 키 발급 받는 방법 (Maps JavaScript API) - 코스모스팜 블로그

홈페이지에 구글 지도를 삽입하려면 API 키를 발급받아야 합니다. Maps JavaScript API 사용 설정과 API 키 발급 과정에 대해서 설명하겠습니다. 과정은 조금 복잡할 수도 있기지만 쉽게 따라 하실 수 있도록 자세히 설명해보겠습니다.

blog.cosmosfarm.com

 

2. 라이브러리를 다운로드
https://gmap3.net/

 

GMAP3

gmap3 is the ultimate plugin to create and manage Google Maps with jQuery. Discover all its potential and try to find its limits ! Why using gmap3? Less than 10ko minified Google Maps syntax No limitation of the Google Maps API Code covered by unit tests.

gmap3.net

 

3. 사용예
아래 예제에서 key=AIzaSyBEmGuIceexKma4Q6yyRD8M-KS5vbPtUVM 구문을 자신이 발행한 키로 변경

<!DOCTYPE html>
<html>
  <head>
  	<link href="../styles.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEmGuIceexKma4Q6yyRD8M-KS5vbPtUVM"></script><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gmap3/7.2.0/gmap3.min.js"></script>
  </head>
  <body>
    <div class="map"></div>
  <script>
    $('.map')
      .gmap3({
        center:[48.8620722, 2.352047],
        zoom:4
      })
      .marker([
        {position:[48.8620722, 2.352047]},
        {address:"86000 Poitiers, France"},
        {address:"66000 Perpignan, France", icon: "https://maps.google.com/mapfiles/marker_grey.png"}
      ])
      .on('click', function (marker) {
        marker.setIcon('https://maps.google.com/mapfiles/marker_green.png');
      });
  </script>

  </body>
</html>

'Javascript' 카테고리의 다른 글

자바스크립트(Javascript)로 브라우저 넓이(width)와 높이(height) 가져오기  (0) 2020.05.26
CSS에서 폰트(Font) 강제로 전체 적용하기  (0) 2020.04.24
Javascript에서 엔터(Enter) 키 이벤트  (0) 2020.04.22
'Javascript' Related Articles more