Google 지도 기본
기본 Google 지도 만들기
이 예에서는 영국 런던을 중심으로 Google 지도를 만듭니다.
예시
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
이 페이지의 나머지 부분에서는 위의 예를 단계별로 설명합니다.
지도 컨테이너 및 크기
지도에는 지도를 담을 HTML 요소가 필요합니다.
<div id="googleMap" style="width:100%;height:400px"></div>
또한 지도의 크기를 설정합니다.
지도 속성을 설정하는 함수 만들기
function myMap() {
var mapProp = {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
mapProp 변수는 지도의 속성을 정의합니다 .
center 속성은 지도 의 중심 위치를 지정합니다(위도 및 경도 좌표 사용).
확대/축소 속성은 지도 의 확대/축소 수준을 지정합니다(확대/축소 수준으로 실험해 보세요).
줄: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 전달된 매개변수(mapProp)를 사용하여 id="googleMap"을 사용하여 <div> 요소 내부에 새 지도를 만듭니다.
다중 지도
아래 예에서는 지도 유형이 서로 다른 4개의 지도를 정의합니다.
예시
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
무료 Google API 키
Google은 웹사이트에서 모든 Google API를 하루에 수천 번 무료로 호출할 수 있도록 허용합니다.
API 키를 얻는 방법을 알아 보려면 https://developers.google.com/maps/documentation/javascript/get-api-key 로 이동 하세요.
Google 지도는 API 를 로드할 때 키 매개변수에서 API 키를 찾을 것으로 예상합니다.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>