JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기

JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기

 

웹페이지들을 보다보면 오시는길과 같은 서비스 페이지에 맵 기능이 있는 것을 보았을 것이다.

구글에서 제공하는 google map api를 통해서 쉽게 구현이 가능하다.

 

API KEY 발급

먼저 코드를 작성하기 전에 api를 사용하기 위한 API KEY를 발급받아야한다.

어려운 내용이 아니고 다른 블로그에 발급받는 방법에 대해 잘 정리된 글들이 많아 이 부분은 생략을 하겠다.

아래 사이트에 접속하여 발급이 가능하다.

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

Google Cloud Platform

코드 작성

위에서 발급 받은 API키를 복사해두고 다음 스크립트문에 자신의 API키를 적어준다.

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=여기에붙여넣기" ></script>

그리고 지도를 표시할 div를 하나 만들어주고 id를 적어준다. 그리고 자신이 원하는 대로 css 설정을 해준다.

<div id="map"></div>

다음은 초기 위치를 나타낼 곳을 지정하기 위해서는 해당 위치에 위도와 경도 값이 필요하다. 그 값을 구하기 위해 구글 맵을 들어가서 위도와 경도를 구한다. 예시로 숭례문을 검색해보았다. 검색 후 나타나는 빨간색 포인트 모양 위에 마우스 우클릭을 하면 다음과 같이 위도 경도 값이 나온다.

JavaScript

아래에 코드에서 자신의 위도와 경도 값을 변경해준다.

$(document).ready(function() { 
    var myLatlng = new google.maps.LatLng(37.55999955137636,126.97530447956169); // 위치값 위도 경도 
    var Y_point = 37.55999955137636; // Y 좌표 
    var X_point = 126.97530447956169; // X 좌표 
    var zoomLevel = 18; // 지도 확대 값  
    var markerTitle = "숭례문"; // 현재 위치 마우스를 오버시 나타나는 값
    var markerMaxWidth = 300; // 마커를 클릭했을때 나타나는 말풍선의 최대 크기 // 말풍선 내용 
    var contentString = '<div>' + '<p>안녕하세요.</p>' + '</div>'; 
    var myLatlng = new google.maps.LatLng(Y_point, X_point); 
    var mapOptions = { zoom: zoomLevel, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    var marker = new google.maps.Marker({ position: myLatlng, map: map, title: markerTitle }); 
    var infowindow = new google.maps.InfoWindow( { content: contentString, maxWizzzdth: markerMaxWidth } ); 
    google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); 
});

웹에 띄워보면 다음과 같이 숭례문을 가리키고 있는 구글맵이 잘 나온다.