최신 웹 개발 튜토리얼
 

Google지도 기본

❮ 이전 다음 장 ❯

기본 구글지도 만들기

이 예는 영국 런던을 중심으로 구글 맵을 작성합니다 :

예

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></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>
»그것을 자신을 시도

이 페이지의 나머지 부분은, 위의 단계별로 예제를 설명합니다.

1.로드 구글 API

Google Maps API는 자바 스크립트 라이브러리입니다. 그것은 함께 웹 페이지에 추가 될 수있다 <script> 태그 :

<script src="http://maps.googleapis.com/maps/api/js"></script>

2.지도 속성

지도를 초기화하는 함수를 작성합니다 :

function initialize() {
}

초기화 함수에서 객체 생성 (mapProp) 지도에 대한 속성을 정의 할 수 :

 var mapProp = {
  center:new google.maps.LatLng(51.508742, -0.120850),
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

중앙 속성은지도의 중심 위치를 지정합니다. 특정 시점에지도를 중심으로하는 LatLng를 개체를 만듭니다. 순서 좌표 합격 : 위도, 경도.

줌 속성은 맵의 줌 레벨을 지정합니다. 줌 : 0 지구의지도가 완전히 축소 보여줍니다. 높은 줌 레벨은 높은 해상도로 확대.

mapTypeId를 속성은 표시 할지도 유형을 지정합니다. 다음지도 유형이 지원됩니다 :

  • 로드맵 (normal, default 2D map)
  • 위성 (photographic map)
  • HYBRID (photographic map + roads and city names)
  • TERRAIN (map with mountains, rivers, etc.)

3.지도 컨테이너 만들기

크리에이트 <div> 지도를 보유 할 요소를. 크기 요소에 CSS를 사용하여

<div id="googleMap" style="width:500px;height:380px;"></div>

지도는 항상 것 "inherit" 컨테이너 요소의 크기를.

4.지도 개체 만들기

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

위의 코드는 내부 새로운 맵 생성 <div> 전달되는 매개 변수를 사용하여, ID = "GoogleMap으로"와 요소 (mapProp) .

5.지도를로드하기 위해 이벤트 리스너를 추가

실행하는 DOM 리스너 추가 initialize() 창로드에 기능을 (when the page is loaded) :

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

비동기로드

필요에 따라 Google지도 API를로드 할 수있다.

아래의 예는 페이지가 완전히로드 된 후 Google지도 API를로드하기 위해 window.onload를 사용합니다.

loadScript() 함수는 Google지도 API 생성 <script> 태그를. 또한, 콜백 = 초기화 파라미터는 실행하는 URL의 끝에 추가되고 initialize() API가 완전히로드 된 후 기능 :

예

function loadScript() {
  var script = document.createElement("script");
  script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;
»그것을 자신을 시도

여러지도

아래의 예는 하나의 웹 페이지 (다른지도 유형과 네 개의 맵)에 네 개의 맵을 정의한다 :

예

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
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);
»그것을 자신을 시도

구글 API 키

구글은 귀하의 웹 사이트가 모든 Google API, 하루에 몇 천 번을 호출 할 수 있습니다.

당신이 무거운 트래픽을하려는 경우, 당신은 구글에서 무료로 API 키를 받아야합니다.

이동 https://console.developers.google.com 무료 키를 얻을 수 있습니다.

Google지도 API를로드 키 매개 변수의 API 키를 찾을 것으로 예상 :

<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>

❮ 이전 다음 장 ❯