웹 페이지에 Google지도를 추가하는 방법

by 제니퍼 키린

01 / 05

사이트에 대한 Google Maps API 키 얻기

Google Developers Console의 클라우드보기입니다. J Kyrnin의 스크린 샷

웹 사이트에 Google지도를 추가하는 가장 좋은 방법은 Google Maps API를 사용하는 것입니다. 지도를 사용하려면 API 키를 받아야합니다.

Google지도 API v3을 사용하기 위해 API 키를 가져올 필요는 없지만 사용량을 모니터링하고 추가 액세스 비용을 지불 할 수 있으므로 매우 유용합니다. Google Maps API v3의 사용자 당 1 초당 요청 수는 하루 최대 25,000 건으로 할당량이 있습니다. 페이지가 이러한 한도를 초과하면 더 많은 정보를 얻기 위해 청구를 사용하도록 설정해야합니다.

Google Maps API 키를 얻는 방법

Google 계정을 사용하여 Google에 로그인하십시오.
개발자 콘솔로 이동
목록을 스크롤하여 Google Maps API v3을 찾은 다음 '사용 안함'버튼을 클릭하여 사용 설정합니다.
이용 약관을 읽고 동의하십시오.
API 콘솔로 이동하여 왼쪽 메뉴에서 'API 액세스'를 선택하십시오.
"Simple API Access"섹션에서 "Create new Server key ..."버튼을 클릭하십시오.
웹 서버의 IP 주소를 입력하십시오. 이것은지도 요청이 오는 IP입니다. IP 주소를 모르는 경우 찾아 볼 수 있습니다.
'API 키 :'행에 텍스트를 복사합니다 (해당 제목 제외). 이것은지도에 대한 API 키입니다.

02 of 02

주소를 좌표로 변환하십시오.

위도와 경도에 표시된 숫자를 사용하십시오. J Kyrnin의 스크린 샷

웹 페이지에서 Google지도를 사용하려면 위치의 위도와 경도가 있어야합니다. 당신은 GPS에서 이것을 얻을 수 있거나 Geocoder.us와 같은 온라인 도구를 사용하여 말할 수 있습니다.

Geocoder.us로 이동하여 검색 창에 주소를 입력하십시오.
위도에 대한 첫 번째 숫자를 복사 한 다음 텍스트 파일에 붙여 넣으십시오. 학위 (º) 표시기가 필요하지 않습니다.
경도의 첫 번째 숫자를 복사 한 다음 (다시 앞에 문자가없는 경우) 텍스트 파일에 붙여 넣으십시오.

위도와 경도는 다음과 같습니다.

40.756076
-73.990838

Geocoder.us는 미국 주소에서만 작동합니다. 다른 국가에서 좌표를 가져와야하는 경우 해당 지역에서 유사한 도구를 검색해야합니다.

03 of 05

웹 페이지에지도 추가하기

구글지도. J Kyrnin의 스크린 샷 -지도 이미지 예의 Google

먼저 맵 스크립트를

당신의 문서의

웹 페이지를 열고 다음을 문서의 HEAD에 추가하십시오.

강조 표시된 부분을 2 단계에서 적어 둔 위도 및 경도 숫자로 변경하십시오.

둘째,지도 요소를 페이지에 추가하십시오.

모든 스크립트 요소가 문서의 HEAD에 추가되면 페이지에지도를 배치해야합니다. id = "map-canvas"속성을 사용하여 DIV 요소를 추가하면됩니다. 이 div의 너비와 높이를 페이지에 맞게 스타일을 지정하는 것이 좋습니다.

마지막으로 업로드 및 테스트

마지막으로해야 할 일은 페이지를 업로드하고지도가 표시되는지 테스트하는 것입니다. 다음은 Google지도의 예입니다. About.com CMS가 작동하는 방식 때문에지도를 표시하려면 링크를 클릭해야합니다. 귀하의 페이지에는 해당되지 않습니다.

지도가 표시되지 않으면 BODY 속성으로 초기화하십시오.

onload = "initialize ()" >

지도가로드되지 않는 경우 확인해야 할 다른 사항은 다음과 같습니다.

대 / 소문자를 포함하여 JavaScript의 오타를 찾으십시오. JavaScript는 대소 문자를 구분합니다.
확대 / 축소 및 가운데 옵션이 설정되어 있는지 확인하십시오.
DIV 요소가 올바른 ID로 페이지에 있는지 확인하십시오.
DIV 요소에 높이가 있는지 확인하십시오.

04 / 05

지도에 마커 추가

마커가있는 Google지도. J Kyrnin의 스크린 샷 -지도 이미지 예의 Google

그러나 사람들에게 그들이 어디로 가야 하는지를 알려주는 마커가 없다면 당신의 위치를 나타내는 맵은 무엇이 좋을까요?

표준 Google지도 빨간색 표시를 추가하려면 var map = ... 행 아래에 다음을 스크립트에 추가하십시오.

var myLatlng = new google.maps.LatLng ( 위도, 경도 );
var marker = 새 google.maps.Marker ({
위치 : myLatlng,
지도 :지도,
제목 : " 전의 headquarters "
});

강조 표시된 텍스트를 위도 및 경도로 변경하고 사람들이 마커 위로 마우스를 가져갈 때 표시 할 제목을 변경하십시오.

페이지에 원하는만큼 마커를 추가 할 수 있습니다. 새 좌표 및 제목이있는 새 변수 만 추가 할 수 있지만지도가 너무 작아서 모든 마커를 표시 할 수 없으면 판독기가 축소되지 않는 한 표시되지 않습니다.

var latlng 2 = 새로운 google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = 새로운 google.maps.Marker ({
위치 : latlng 2 ,
지도 :지도,
제목 : " Apple Computer "
});

다음은 마커가있는 Google지도의 예입니다. About.com CMS가 작동하는 방식 때문에지도를 표시하려면 링크를 클릭해야합니다. 귀하의 페이지에는 해당되지 않습니다.

05/05

페이지에 두 번째 (또는 그 이상)지도 추가

예제 Google지도 페이지를 살펴 본다면 페이지에 둘 이상의지도가 표시됩니다. 이것은 매우 쉽게 할 수 있습니다. 방법은 다음과 같습니다.

이 튜토리얼의 2 단계에서 배웠던 것처럼 표시하려는 모든지도의 위도와 경도를 가져옵니다.
이 튜토리얼의 3 단계에서 배운 첫 번째 맵을 삽입하십시오. 지도에 마커가 있으면 4 단계와 같이 마커를 추가합니다.
두 번째 맵의 경우, initialize () 스크립트에 3 개의 새로운 행을 추가해야합니다.
var latlng2 = new google.maps.LatLng ( 두 번째 좌표 );
var myOptions2 = {zoom : 18, center : latlng2, mapTypeId : google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map (document.getElementById ( "map_canvas_2"), myOptions2);
새지도에 마커를 추가하려면 두 번째 좌표와 두 번째지도를 가리키는 두 번째 마커를 추가합니다.
var myMarker2 = new google.maps.Marker ({위치 : latlng2 , map : map2 , title : " 마커 제목 "});
그런 다음 두 번째
두 번째지도가 필요한 곳. id = "map_canvas_2"ID를 지정해야합니다.
페이지가로드되면 두 개의지도가 표시됩니다.

다음은 두 개의 Google지도가있는 페이지의 코드입니다.