Google 지도 기본 사항
Google 지도 기본
간단한 Google 지도 만들기
이제 간단한 Google 지도를 만들어 보겠습니다.
다음은 영국 런던을 보여주는 Google 지도입니다.
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요
예제 분석
우리는 위의 예는 Google Maps의 생성 과정을 분석하기 위한 것입니다.
애플리케이션이 HTML5를 선언해야 하는 이유는 무엇입니까?
대부분의 브라우저는 "표준 모드" HTML5 문서를 사용하여 페이지를 렌더링합니다. 이는 애플리케이션이 모든 주요 브라우저와 호환된다는 의미입니다.
또한 DOCTYPE 태그가 없으면 브라우저는 혼합 모드(쿼크 모드)를 사용하여 페이지 콘텐츠를 렌더링합니다.
팁: "혼합 모드"의 일부 CSS는 표준 모드에서 사용할 수 없다는 점에 유의해야 합니다. 특정 애플리케이션에서 모든 백분율 기반 크기는 상위 블록 요소에서 상속되어야 합니다. 상위 모듈에 크기가 지정되지 않은 경우 기본값은 0 x 0 픽셀입니다. 백분율을 사용하려면 다음과 같이 <style> 태그에 선언하면 됩니다.
html {height:100%}
body {height:100 % ;margin:0;padding:0}
#googleMap {height:100%}
</style>
이 스타일 선언은 지도 모듈(GoogleMap)이 HTML 높이는 100%입니다.
Google 지도 API 키 추가
다음 예에서 첫 번째 <script> 태그에는 Google 지도 API가 포함되어야 합니다.
Google에서 생성한 API 키를 key 매개변수(key=YOUR_API_KEY) 에 넣습니다.
sensor 매개변수는 필수이며 애플리케이션이 사용자 위치를 찾기 위해 센서(GPS 내비게이션과 유사)를 사용할지 여부를 지정합니다. 매개변수 값은 true 또는 false로 설정할 수 있습니다.
HTTPS
애플리케이션이 보안 HTTP(HTTPS: HTTP Secure) 애플리케이션인 경우 HTTPS를 사용하여 Google을 로드할 수 있습니다. 지도 API:
비동기 로딩
마찬가지로 페이지가 완전히 로드된 후에 Google Maps API를 로드할 수도 있습니다.
다음 예에서는 페이지가 완전히 로드된 후 window.onload를 사용하여 Google 지도를 로드합니다. loadScript() 함수는 Google Maps API 로드 태그를 생성합니다. 또한 태그 끝에 추가됨 callback=initialize 매개변수, 콜백 함수인 초기화()는 API가 완전히 로드된 후 실행됩니다.
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
정의 지도 속성
지도를 초기화하기 전에 지도 속성 객체를 생성하여 일부 지도 속성을 정의해야 합니다.
center:new google.maps.LatLng(51.508742,-0.120850) ,
Zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
center (중심점)
center 속성은 지도의 중심을 지정하며 좌표를 통해 지도에 중심을 만듭니다. (위도, 경도) 지점입니다.
Zoom(확대/축소 수준)
zoom 속성은 지도의 확대/축소 수준을 지정합니다. Zoom: 0은 전체 지구 지도의 전체 확대/축소를 표시합니다.
MapTypeId(지도의 초기 유형)
mapTypeId 속성은 지도의 초기 유형을 지정합니다.
mapTypeId에는 다음 네 가지 유형이 포함됩니다.
google.maps.MapTypeId.HYBRID: 위성 이미지의 주요 거리 투명 레이어를 표시합니다.
google.maps.MapTypeId.ROADMAP: 일반 거리 지도를 표시합니다
google.maps.MapTypeId.SATELLITE: 위성 이미지 표시
google.maps.MapTypeId.TERRAIN: 지형, 식물 등 자연 지형이 포함된 지도 표시
Google 지도 표시 위치
보통 Google 지도가 사용됩니다. <div> 요소:
참고: 지도의 크기는 div에 설정된 것은 지도의 크기를 표시하므로 <div> 요소에서 지도의 크기를 설정할 수 있습니다.
지도 객체 만들기
,mapProp);
위 코드는 <div>에서 매개변수(mapProp)를 사용합니다. ; 요소( googleMap ID로 새 지도가 생성됩니다.)
팁: 페이지에 여러 지도를 생성하려면 새 지도 개체만 추가하면 됩니다.
다음 예에서는 4개의 지도 인스턴스를 정의합니다(4개의 지도는 서로 다른 지도 유형을 사용함).
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
지도 로드
창이 로드된 후 초기화() 함수를 실행하여 지도 개체를 초기화합니다. 페이지가 완전히 로드된 후에 지도 객체가 로드됩니다. Google 지도 로드:
