Latest web development tutorials

Google지도 기본

간단한 Google지도 만들기

이제 간단한 Google지도를 만들 수 있습니다.

다음은 Google지도 런던을 나타내는 그래프이다 :

예

<!DOCTYPE html>
<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>

»시도

분석의 예

위의 예에서 우리는 구글 맵을 해결하는 프로세스를 만들 수 있습니다.

왜 응용 프로그램 HTML5를 선언해야합니까?

<!DOCTYPE html>

대부분의 브라우저는 응용 프로그램이 모든 주요 브라우저와 호환된다는 것을 의미 페이지 문서를 렌더링 HTML5의 "표준 모델"을 사용합니다.

더 DOCTYPE 태그가없는 경우 또한, 브라우저가 페이지의 콘텐츠를 렌더링하기위한 무차별 모드 (쿼크 모드)를 사용한다.

팁 : 그것은 CSS의 일부 "무차별 모드"주목해야한다 당신은 표준 모드를 사용할 수 없습니다.특정 애플리케이션에서, 모든 크기의 비율에 기초하여 상위 블록 요소로부터 상속한다. 당신은 부모의 모듈의 크기, 기본값 0 X 0 픽셀을 지정하지 않은 경우. 당신이 비율을 사용하려면 다음과 같이에서 <스타일> 태그에 선언 할 수 있습니다 :

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

이지도 쇼 스타일 선언 모듈 (GoogleMap으로는) 100 %의 HTML 높이이어야한다.

Google지도 API 키 추가

다음 예에서 첫 번째 <script> 태그는 Google지도 API에 포함되어야합니다 :

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

주요 매개 변수(키= YOUR_API_KEY)에 배치 된 구글에서 생성 된 API 키입니다.

센서 파라미터는 파라미터는 애플리케이션이 사용자의 위치를 찾기 위해 (GPS를 탐색 유사) 센서를 사용하는지 여부를 나타내는 데 사용되는 필요하다.매개 변수 값은 true 또는 false로 설정할 수 있습니다.

HTTPS

응용 프로그램이 보안 HTTP 경우 (HTTPS : HTTP 보안) 응용 프로그램, 당신은 Google지도 API를로드하는 HTTPS를 사용할 수 있습니다 :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

비동기로드

페이지가 완전히로드 된 후 마찬가지로, 우리는 또한 Google지도 API를로드 할 수 있습니다.

다음의 예는 페이지가 Google지도를로드 할 때 완전히로드 구현하기 위해 window.onload를 사용합니다. loadScript () 함수는 Google지도 API <script> 태그를로드 만듭니다. API가 완전히 콜백 함수로로드 된 후 또한 콜백 라벨의 끝 = 실행될 것이다) (초기화 파라미터를 초기화 :

예

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

window.onload = loadScript;

»시도

사용자 지정지도 속성

지도를 초기화하기 전에, 우리는 부동산지도 속성을 정의하는 Map 객체를 생성해야합니다 :

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

중심 (센터)

센터 속성은 좌표 (위도, 경도)하여지도의 중앙 지점을 만들 수있는지도 센터를 지정합니다.

줌 (줌 시리즈)

줌지도 줌 속성은 단계의 수를 지정합니다. 줌 : 0 전체 규모를 지구 전체지도를 보여줍니다.

mapTypeId를 (초기 형태 맵)

mapTypeId를 유형 속성의 초기지도를 지정한다.

mapTypeId를 다음과 같은 네 가지 유형을 포함한다 :

  • google.maps.MapTypeId.HYBRID는 : 위성 이미지는 투명 층의 메인 스트리트를 표시
  • google.maps.MapTypeId.ROADMAP : 정상 거리지도 표시
  • 의 google.maps.MapTypeId.SATELLITE :보기 위성 이미지
  • google.maps.MapTypeId.TERRAIN : 표시 (예 : 지형과 식생 등) 물리적 기능과 매핑

Google지도를 표시하는 경우

일반적으로 Google지도 <div> 요소에 사용되는 :

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

맵의 크기는 맵의 크기를 나타내도록 설정한다 DIV 그래서 우리는 <div> 요소 맵의 크기를 설정할수있습니다.

지도 개체 만들기

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

위의 코드는 (ID를 GoogleMap으로 임) <div> 요소의 매개 변수 (mapProp)를 사용하는 새로운 맵을 작성합니다.

팁 : 여러지도 페이지를 만들려면, 당신은 단지 새로운 맵 객체가 될 수 있습니다 추가해야합니다.

다음 예 (지도 네 가지 유형을 사용하여지도) 네 인스턴스 맵을 정의한다 :

예

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지도를로드하기 전에로드 있도록 보장하는 초기화 () 함수를 실행하여 로딩 한 후 개체를 초기화 창지도 :

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