구글맵 API 사용하기

2014-06-15

Explanation

참고링크 :
https://developers.google.com/maps/documentation/javascript/

– 모든 정보는 Google Developers 사이트에서 친절한 번역과 함께 제공하고 있습니다.

2015.06.10 추가사항

생각보다 많은 분들이 포스트를 봐주셔서… 두개 이상 마커를 표시하는 방법을 추가하였습니다.

2017.03.24 추가사항

‘구글지도원츄’님이 말씀해주신 API KEY로 구글맵를 사용하는 방법을 추가하였습니다.

1. 기본설정

1-1. 일반

<!DOCTYPE html>

<html>

<head>

</head>

</html>

1-2. 워드프레스

[funtions.php]

<?php

function google_map_script(){

wp_enqueue_script('google-map-api', 'https://maps.google.com/maps/api/js?v=3.exp&region=KR', array(), false, true);

}

add_action('wp_enqueue_scripts', 'google_map_script');

[‘&region=KR’ // ‘동해’, ‘독도’의 표기를 위한 설정입니다.]

1-3. 구글맵 태그

1	<div id="google_map" style="width:100px; height:100px;"></div>

2. 구글맵 자바스크립트 API

2-1. Javascript API

jQuery(document).ready(function(){

google.maps.event.addDomListener(window, 'load', initialize);

function initialize(){

if($("#google_map").length) {

var mapOptions = { //구글 맵 옵션 설정

zoom : 16, //기본 확대율

center : new google.maps.LatLng(37.5651, 126.98955), // 지도 중앙 위치

scrollwheel : false, //마우스 휠로 확대 축소 사용 여부

mapTypeControl : false //맵 타입 컨트롤 사용 여부

};

var map = new google.maps.Map(document.getElementById('google_map'), mapOptions); //구글 맵을 사용할 타겟

var image = 'https://cheolguso.com/img/iconimg.png'; //마커 이미지 설정

var marker = new google.maps.Marker({ //마커 설정

map : map,

position : map.getCenter(), //마커 위치

icon : image //마커 이미지

});

google.maps.event.addDomListener(window, "resize", function() { //리사이즈에 따른 마커 위치

var center = map.getCenter();

google.maps.event.trigger(map, "resize");

map.setCenter(center);

});

}//if-end

}//function-end

});//jQuery-end

2-2. 그 밖의 구글맵 옵션

var mapOptions = {

disableDefaultUI : true, //기본 UI 사용 여부

disableDoubleClickZoom : true, //더블클릭 중심으로 확대 사용 여부

draggable : true, //지도 드래그 이동 사용 여부

keyboardShortcuts : true, //키보드 단축키 사용 여부

maxZoom : 18, //최대 줌

minZoom : 1 //최소 줌

};

이 밖의 모든 옵션 :
https://developers.google.com/maps/documentation/javascript/reference#MapOptions

3. 구글맵 날씨 API

구글맵 날씨 사용하기

1	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script>

google.maps.event.addDomListener(window, 'load', initialize);

function initialize(){

if($("#google_map").length) {

var mapOptions = {

center : new google.maps.LatLng(37.5651, 126.98955)

};

var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);

var image = 'https://cheolguso.com/img/iconimg.png';

var marker = new google.maps.Marker({

map : map,

position : map.getCenter(),

icon : image

});

var weatherLayer = new google.maps.weather.WeatherLayer({

temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS

});

weatherLayer.setMap(map);

var cloudLayer = new google.maps.weather.CloudLayer();

cloudLayer.setMap(map);

}

날씨 예제 보기 :
https://developers.google.com/maps/documentation/javascript/examples/layer-weather

4. 구글맵 스타일 API

구글맵 스타일 사용하기

google.maps.event.addDomListener(window, 'load', initialize);

function initialize(){

if($("#google_map").length) {

var mapOptions = {

center : new google.maps.LatLng(37.5651, 126.98955)

};

var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);

var image = 'https://cheolguso.com/img/iconimg.png';

var marker = new google.maps.Marker({

map : map,

position : map.getCenter(),

icon : image

});

var styles = [

{

stylers: [

{hue: 0},

{saturation: -100},

{lightness: 0},

]

}

];

var styledMap = new google.maps.StyledMapType(styles,

{name: "Styled Map"});

map.mapTypes.set('map_style', styledMap);

map.setMapTypeId('map_style');

}

포토샵의 ‘Adjustments’ -> ‘Hue/Saturation’ 기능을 참고하여 사용하면 좋을거 같다.
[※스타일 기능을 사용할 경우 한국내의 지도정보는 나타나지 않습니다.]

스타일 레퍼런스 :
https://developers.google.com/maps/documentation/javascript/styling

5. 구글맵 마커 추가

구글맵에 2개의 마커 사용하기

google.maps.event.addDomListener(window, 'load', initialize);

function initialize(){

var mapOptions = {

zoom : 16,

center : new google.maps.LatLng(37.544553, 127.017309), //기준이 될 가운데 좌표

disableDefaultUI : false,

scrollwheel : false,

mapTypeControl : false,

zoomControl : false,

zoomControlOptions : false,

streetViewControl : false,

panControl :false

};

var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);

google.maps.event.addDomListener(window, "resize", function() {

var center = map.getCenter();

google.maps.event.trigger(map, "resize");

map.setCenter(center);

});

var company = [

['company 1', 37.5375772, 127.0062798, 2], // 1번 타이틀, 마커 좌표값, 우선순위(z-index)

['company 2', 37.544553, 127.017309, 1] // 2번 타이틀, 마커 좌표값, 우선순위(z-index)

];

setMarkers(map, company);

}

function setMarkers(map, locations){

for(var i=0; i < locations.length; i++){

if(i == 0) var image = 'https://cheolguso.com/img/iconimg.png'; // 1번 마커 이미지

if(i == 1) var image = 'https://cheolguso.com/img/iconimg2.png'; // 2번 마커 이미지

var compa = locations[i];

var myLatLng = new google.maps.LatLng(compa[1], compa[2]);

var marker = new google.maps.Marker({

position: myLatLng,

map: map,

icon : image,

title : compa[0],

zIndex : compa[3]

});

}

6. API KEY로 구글맵 불러오기

API KEY로 구글맵 불러오기

<body>

var map;

function initialize() {

var mapOptions = { //구글 맵 옵션 설정

zoom : 16, //기본 확대율

center : new google.maps.LatLng(37.5651, 126.98955), // 지도 중앙 위치

scrollwheel : false, //마우스 휠로 확대 축소 사용 여부

mapTypeControl : false //맵 타입 컨트롤 사용 여부

};

map = new google.maps.Map(document.getElementById('google_map'), mapOptions); //구글 맵을 사용할 타겟

var image = 'https://cheolguso.com/img/iconimg.png'; //마커 이미지 설정

var marker = new google.maps.Marker({ //마커 설정

map : map,

position : map.getCenter(), //마커 위치

icon : image //마커 이미지

});

google.maps.event.addDomListener(window, "resize", function() { //리사이즈에 따른 마커 위치

var center = map.getCenter();

google.maps.event.trigger(map, "resize");

map.setCenter(center);

});

}

</script>

</body>

sh님 대략적인 전체 구조는 아래와 같습니다.

<!DOCTYPE html>

<head>

</head>

<body>

jQuery(document).ready(function(){

google.maps.event.addDomListener(window, 'load', initialize);

function initialize(){

if($("#google_map").length) {

...

}

});

</script>

</body>

</html>

잘못된 정보가 있다면 댓글로 남겨주시면 감사하겠습니다 :)

Sequelize #2 쿼리, 외래키 (for MySQL)

2020-01-01

link area

웹 취약점 공격 방법인 XSS, CSRF에 대하여 간단하게 알아보기

2021-03-04

link area

Ubuntu를 사용하는 NGINX 웹 서버에 HTTP/3 설정하기

2024-09-27

link area

1. 기본설정

2. 구글맵 자바스크립트 API

3. 구글맵 날씨 API

4. 구글맵 스타일 API

5. 구글맵 마커 추가

6. API KEY로 구글맵 불러오기

sh님 대략적인 전체 구조는 아래와 같습니다.

Other posts

Sequelize #2 쿼리, 외래키 (for MySQL)

웹 취약점 공격 방법인 XSS, CSRF에 대하여 간단하게 알아보기

Ubuntu를 사용하는 NGINX 웹 서버에 HTTP/3 설정하기