간단한 웹 메모 서비스 AFOUR
구글맵 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 2 3 4 5 6 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.exp®ion=KR"></script> </head> </html> |
1-2. 워드프레스
1 2 3 4 5 6 7 |
[funtions.php] <?php function google_map_script(){ wp_enqueue_script('google-map-api', 'https://maps.google.com/maps/api/js?v=3.exp®ion=KR', array(), false, true); } add_action('wp_enqueue_scripts', 'google_map_script'); ?> |
[‘®ion=KR’ // ‘동해’, ‘독도’의 표기를 위한 설정입니다.]
1-3. 구글맵 태그
1 |
<div id="google_map" style="width:100px; height:100px;"></div> |
2-1. Javascript API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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. 그 밖의 구글맵 옵션
1 2 3 4 5 6 7 8 |
var mapOptions = { disableDefaultUI : true, //기본 UI 사용 여부 disableDoubleClickZoom : true, //더블클릭 중심으로 확대 사용 여부 draggable : true, //지도 드래그 이동 사용 여부 keyboardShortcuts : true, //키보드 단축키 사용 여부 maxZoom : 18, //최대 줌 minZoom : 1 //최소 줌 }; |
이 밖의 모든 옵션 :
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
구글맵 날씨 사용하기
1 |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
구글맵 스타일 사용하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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
구글맵에 2개의 마커 사용하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
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] }); } } |
API KEY로 구글맵 불러오기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<body> <div id="google_map" style="width:100px; height:100px;"></div> <script> 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> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script> <!-- ?key=YOUR_API_KEY //이곳에 API KEY를 입력합니다. --> <!-- callback=initialize // 콜백으로 initialize() 함수가 실행됩니다. --> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html leng="ko-KR"> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.exp®ion=KR"></script> </head> <body> <div id="google_map" style="width:100px; height:100px;"></div> <script type="text/javascript"> jQuery(document).ready(function(){ google.maps.event.addDomListener(window, 'load', initialize); function initialize(){ if($("#google_map").length) { ... } } }); </script> </body> </html> |
잘못된 정보가 있다면 댓글로 남겨주시면 감사하겠습니다 :)