본문
Google Maps(JavaScript)
프로그래밍/HTML&JavaScript 2017. 1. 16. 20:42
반응형
# Google Maps
Android, iOS, 웹 브라우저 및 HTTP 웹 서비스를 통해 이용할 수 있다.
# Google Maps API
https://developers.google.com/maps/?hl=ko
# Google Maps JavaScript API
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ko
# Google Maps Default 언어 설정하기
- language 부분을 원하는 국가명으로 변경 (ex. en -> ko)
1 | ...key=${googleApiMapkey}&language=en"...> | cs |
example) -.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%> <%@ include file="/taglibs.jsp"%> <!DOCTYPE> <html> <head> ... <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=${googleApiMapkey}&language=en"></script> ... </head> | cs |
# Google Maps Default 위치 설정하기
function initMap() 내부 위도(latitude), 경도(longitude) 정보 설정
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 | <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html> | cs |
Google Maps API Sample Source를 이용하여 다양한 기능들을 사용할 수 있다.
(https://developers.google.com/maps/documentation/javascript/examples/?hl=ko)
반응형
댓글