구글지도|다양한 마커와 라벨 | Maps Marker | svg/png/Google Fonts

세상을 바꾸는 구글의 또 다른 쾌거는 구글 지도를 들 수 있다. 지도는 공간이동을 일상으로 하는 사람들에게 필수적이다. 아래 링크에서 <스크립트 >를 복사하여 블로그 페이지에 붙여넣으면 다음과 같은 지도가 만들어진다. 포스트 내용을 참고해서 위치(Coordinate)와 마커(Marker)를 수정하고 추가하면 다양하고 수많은 장소를 동시에 표시할 수 있다.

구글지도 코드 다운로드

API 키 발급

API(Application Programming Interface) 키는 일종의 인증서로, 반드시 발급받아야 한다. 복사한 지도 코드에 포함된 아래 스크립트의 파란색 영역(your key)에 발급받은 키를 붙여넣으면 된다. 키는 구글 클라우드에 가입하고 생성한 프로젝트에서 만들면 된다.

<script src="https://maps.googleapis.com/maps/api/js?key=your key&amp;callback=initMap" ></script >

위치(Coordinate)

위치(좌표) 스크립트(Coordinate Script)는 다른 좌표와 차별화되는 고유한 위도, 경도, 마커 색상, 라벨(위치 이름)로 구성할 수 있다.

마커의 크기, 이미지 종류, 글자 크기 등은 마커 스크립트(Marker Script)에서 수정하면 된다.

지도에 여러 개의 위치를 표시하려면 그 수만큼 아래의 스크립트(1,2,3,4)를 복사하고 각각 다른 좌표를 설정해서 나열하면 된다.

위치마다 다른 마커(이미지)를 사용하고자 할 때는 상응하는 마커 스크립트를 만들어야 하고, 위치와 마커의 이름(핑크색 밑줄)이 반드시 같아야 한다.

 addMarker({
lat: 35.990163918054265, 
lng: 128.39783162226806
},"green",'순심연합총동창회');

1번 줄  >

위치 이름(addMarker)은 마커 스크립트(Marker Script) 이름과 같아야 한다. 임의로 무한대의 위치를 만들 수 있으나, 반드시 적용할 마크 스크립트의 이름과 같도록 설정해야 한다.

2번 줄 >

위도(latitude)는 지구상에서 적도를 기준으로 북쪽 또는 남쪽으로 떨어진 거리의 위치이다.

3번 줄 >

경도(longitude)는 지구상에서 본초 자오선을 기준으로 동쪽 또는 서쪽으로 떨어진 거리의 위치이다.

4번 줄 >

마커 이미지의 색상(8종)을 지정하고, 장소 이름을 설정한다.

구글 지도에서 표시할 장소를 마우스 우측버튼으로 클릭하면 팝업되는 위지 좌표(핑크 사각형)에 다시 좌측버튼으로 클릭하면 클립보드에 복사된다.

좌표 찾기는 국가와 지역 따라 달라 보인다. 한국에서는 원하는 위치에 마우스 좌측버튼을 눌러 회색 아이콘이 표시되면 다시 한번 더 누르면 좌표가 표시된다.

마커(Marker)

마커 스크립트(Marker Sript)는 적용할 위치(좌표) 스크립트(Coordinat Script)와 반드시 같은 이름(핑크색 밑줄)이 지정되어야 한다.

위치(좌표)의 마커 크기, 장소 이름 크기, 라벨 위치 등은 같은 이름을 가진 여러 개의 좌표(좌표)에 획일적으로 적용할 수 있다.

마크 이름(Marker Name)이 다른 여러 개의 스크립트를 만들어 위치(좌표)에 적용하면 각각 다른 마커를 나타낼 수 있다. 아래의 마커 스크립트(Marker Script)를 복사해서 마크종류(URL), 라벨 색상 등을 자유자재로 변경할 수 있다.

 function   addMarker(location, color, content, title, snippet) {
var marker = new google.maps.Marker({
    position: location,
    map,
    title:title,
    snippet:snippet,
    label:{
    text:content,
    className: "green"
},
    icon: {
    url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png', 
    scaledSize: new google.maps.Size(25,25),
    labelOrigin:new google.maps.Point(30, 45),
},});} 

1번 줄  >

마커 이름(Marker Name)은 위치 이름(Coordinate Name)과 같아야 한다.

12번 줄 >

마커로 사용할 이미지 URL이다. jpg, png, svg, 구글 머티리얼 아이콘을 사용할 수 있다. 마커 표시를 하지 않으려면 url을 삭제하면 된다.

13번 줄 >

마커 이미지의 크기를 설정한다. 폭(왼쪽 숫자)과 높이(오른쪽 숫자)를 지정하면 된다.

라벨 수정

<style >
.Ksea{
color: black;
background-color:white;
padding:10px;
border-radius:5px;
}
</style >

1번 줄  >

마커 이름(Marker Name)은 위치 이름(Coordinate Name)과 같아야 한다.

9번 줄 >

마커(위치)라벨의 스타일(글자 크기, 배경 등)을 설정할 수 있다. 지도가 표시되는 페이지에 <style >을 지정하면 된다. <className >을 지정하지 않으면 <위치(Coordinate)  >에서 기재한 글자만 표시된다.

14번 줄 >

라벨의 위치를 설정한다. 왼쪽의 숫자는 수평 위치를 지정하며, 0(중심)을 기준으로 음수(-)는 왼쪽, 양수는 오른쪽으로 이동할 수 있다.

오른쪽 숫자는 수직 위치를 지정하며, 0을 기준으로 음수(-)는 위쪽, 양수는 아래쪽 이동할 수 있다.

의 관련글