Google Maps API

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

    </script>
    <script type="text/javascript">
      function initialize() {
    	    var latlng = new google.maps.LatLng(-34.397, 150.644); // 호주의 지리좌표
            var mapOptions = {
               center: latlng,
               zoom: 8,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map ( document.getElementById("map_canvas"), mapOptions );
            var marker = new google.maps.Marker ( {position:latlng, map:map} );
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

위의 코드에 사용된 key=xxxxxx&sensor=FALSE 부분의 xxxxxx부분에 API Key 가 들어가야 하고 PC상에서 테스트하므로 sensor=FALSE로 설정한다
zoom:0~18

지원되는 지도 유형은 다음과 같습니다

ROADMAP - 일반적인 Google의 기본 2D 타일을 표시합니다.
SATELLITE - 사진 타일을 표시합니다.
HYBRID - 사진 타일과 도로, 도시 이름 등 주요 지형지물을 담고 있는 타일 레이어를 조합하여 표시합니다.
TERRAIN - 고도 및 수경(산, 강 등)을 표시하기 위한 물리적 기복 타일을 표시합니다.

지명(주소)을 입력하여 위도, 경도 확인하기 (테스트로 사용될 특정 지명의 좌표 구하기)

1. http://map.google.co.kr 에 접속

2. 왼쪽 검색란에 '성남모란역' 을 입력하고 엔터키를 누른다

3. 웹브라우저 주소창에 아래와 같은 형식으로 나타난 위도/경도 정보를 복사한다

https://www.google.co.kr/maps/place/%EB%AA%A8%EB%9E%80%EC%97%AD/@37.432124,127.129064,17z/data=!3m1!4b1!4m2!3m1!1s0x357ca88171af4a7b:0x82c38ccecb50a9a9

4. 확인된 위도/경도를 앞의 예제에 입력하여 실행한다

지리좌표를 주소로 변환하는 Geocoder 예제

지도상에서 마우스를 클릭하면 해당 지점의 좌표가 이벤트 객체에 저장된 상태로 이벤트핸들러 함수로 전달된다.

이벤트를 통해 얻은 지리좌표를 Geocoder 에게 전달하여 처리하면 클릭된 지점의 주소를 얻을 수 있다.

지오코딩, 역 지오코딩 https://developers.google.com/maps/documentation/javascript/geocoding

Geocode : 주소 -> 지도상의 위치로 변환

Reverse Geocode : 지도상의 위치 -> 주소로 변환

GeocodeRequest 객체의 구성

{

address: string,

latLng: LatLng,

bounds: LatLngBounds,

region: string

}

위의 구성 중에서 address, latLng 둘 중 하나는 필수적으로 요청에 포함되어야 한다.

지오코딩 요청시 address 항목을 사용하면 지오코딩 기능을 수행하고, latLng 항목을 사용하면 역 지오코딩 기능이 수행된다

GeocoderResults 객체의 구성

results[]:

{

types[]: string,

formatted_address: string,

address_components[]:

{

short_name: string,

long_name: string,

types[]: string

geometry:

{

location: LatLng,

location_type: GeocoderLocationType

viewport: LatLngBounds,

bounds: LatLngBounds

}

지오코딩의 결과를 저장한 GeocoderResults 는 배열형태로 전달되며. 배열의 첫번째 원소( result[0] )에 가장 상세한 정보가 저장되어 있다

GeocoderResults의 formatted_address 속성을 출력한 예

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",

results[1].formatted_address: "Williamsburg, NY, USA",

results[2].formatted_address: "New York 11211, USA",

results[3].formatted_address: "Kings, New York, USA",

results[4].formatted_address: "Brooklyn, New York, USA",

results[5].formatted_address: "New York, New York, USA",

results[6].formatted_address: "New York, USA",

results[7].formatted_address: "United States"

지오코딩 요청 및 응답의 예 (주소를 요청에 포함하고 결과로 좌표를 얻는다) , JSTL과 jQuery 도 사용됨

지오코드 요청시 주소를 전달하여 서버로부터 해당 위치의 주소와 지리좌표를 받아서 지도 하단에 출력하는 예

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

</script>

function initialize() {

//var latlng = new google.maps.LatLng(-34.397, 150.644); // 호주의 예

var latlng = new google.maps.LatLng(37.432124,127.129064); // 성남 모란역

var mapOptions = {

center: latlng,

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({position:latlng, map:map});

var geocoder = new google.maps.Geocoder();

//지오코딩 요청/응답

geocoder.geocode( {'address':'성남 모란역'}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

$('#div1').empty();

$('#div1').append('주소='+ results[0].formatted_address);

$('#div1').append('<br>');

$('#div1').append('좌표='+ results[0].geometry.location);

if(!marker) { //클릭시마다 마커를 새로 생성하면 마커의 수가 증가한다

marker = new google.maps.Marker({

map: map, position: results[0].geometry.location

});

}else{ // 마커가 이미 있는 경우에는 아래처럼 처리하면 마커의 수가 증가하지 않는다

marker.setMap(null);

marker = new google.maps.Marker({map: map, position: results[0].geometry.location});

}

} else {

alert("Geocode was not successful for the following reason: " + status);

}

});

}

</script>

</head>

</body>

</html>

응답 상태코드의 종류

google.maps.GeocoderStatus.OK는 지오코딩이 성공했음을 나타냅니다.

google.maps.GeocoderStatus.ZERO_RESULTS는 지오코딩이 성공했지만 반환된 결과가 없음을 나타냅니다. 이는 지오코딩이 존재하지 않는 address 또는 원격 지역의 latng을 전달받는 경우 발생할 수 있습니다.

google.maps.GeocoderStatus.OVER_QUERY_LIMIT는 할당량을 초과되었음을 나타냅니다.

google.maps.GeocoderStatus.REQUEST_DENIED는 요청이 특정 사유로 인해 거부되었음을 나타냅니다.

google.maps.GeocoderStatus.INVALID_REQUEST는 일반적으로 쿼리(address 또는 latLng)가 누락되었음을 나타냅니다.

역 지오코딩 요청 및 응답의 예 (지도를 클릭하면 클릭된 좌표를 구하고 그 좌표를 요청하여 주소를 얻고 지도 하단에 출력한다)

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

</script>

function initialize() {

var latlng = new google.maps.LatLng(37.432124,127.129064); // 성남 모란역

var mapOptions = {

center: latlng,

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({position:latlng, map:map});

var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event){

var location = event.latLng; //이벤트객체로부터 지리좌표 추출

//역 지오코딩 요청/응답

geocoder.geocode( {'latLng':location}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

$('#div1').empty();

$('#div1').append('주소='+ results[0].formatted_address);

$('#div1').append('<br>');

$('#div1').append('좌표='+ results[0].geometry.location);

if(!marker) { //클릭시마다 마커를 새로 생성하면 마커의 수가 증가하므로 생성되지 않게 함

marker = new google.maps.Marker({

map: map, position: results[0].geometry.location

});

}else{ // 마커가 이미 있는 경우에는 아래처럼 마커를 제거하고 다른 위치에 새로 생성한다

marker.setMap(null);

marker = new google.maps.Marker({

map: map, position: results[0].geometry.location

});

}

} else {

alert("Geocode was not successful for the following reason: " + status);

}

});

}

</script>

</head>

</body>

</html>

Marker를 클릭하면 중심위치로 이동하는 이벤트처리 예

마커를 클릭하면 해당 마커가 화면 중심으로 이동하고 3초후에 다시 원래 위치로 돌아간다

https://developers.google.com/maps/documentation/javascript/events

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD7bLN3asdfq34tI5sE0afXe3H8Rq-jef7s &sensor=FALSE">

</script>

function initialize() {

var latlng = new google.maps.LatLng(37.432124,127.129064); // 성남 모란역

var mapOptions = {

center: latlng,

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({position:latlng, map:map});

var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(map, 'click', function(event){

var location = event.latLng; //이벤트객체로부터 지리좌표 추출

//역 지오코딩 요청/응답

geocoder.geocode( {'latLng':location}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

} else {

alert("Geocode was not successful for the following reason: " + status);

}

});

// Marker 가 위치한 지도의 중심위치가 변경되면 3초후에 다시 원래 위치로 돌아오는 예

google.maps.event.addListener(map, 'center_changed', function() {

// 3 seconds after the center of the map has changed, pan back to the

// marker.

window.setTimeout(function() {

map.panTo(marker.getPosition());

}, 3000);

});

// 마커를 클릭하면 12줌으로 설정되고 클릭된 마커가 화면의 중심에 위치하는 예

google.maps.event.addListener(marker, 'click', function() {

map.setZoom(12);

map.setCenter(marker.getPosition());

});

}

</script>

</head>

</body>

</html>

OverLay

https://developers.google.com/maps/documentation/javascript/overlays

InfoWindow 사용 예 ( 마커를 클릭하면 지도 위에 정보 출력)

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

#info { width:200px; }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

</script>

function initialize() {

var latlng = new google.maps.LatLng(37.432124,127.129064); //성남 모란역

var mapOptions = {

zoom: 4,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var contentString = '<div id="info">'+

'<h3>모란역 정보</h3>'+

'성남 모란역입니다'+

'</div>';

var infowindow = new google.maps.InfoWindow({

content: contentString,

maxWidth: 200

});

var marker = new google.maps.Marker({

position: latlng,

map: map

});

google.maps.event.addListener ( marker, 'click', function() {

infowindow.open ( map, marker );

});

}

</script>

</head>

</body>

</html>

투명한 사각형 오버레이 출력의 예

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

</script>

function initialize() {

var latlng = new google.maps.LatLng(37.432124,127.129064); //성남 모란역

var rectangle;

var mapOptions = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

rectangle = new google.maps.Rectangle();

//줌이 변경되면 사각형 오버레이가 나타난다

google.maps.event.addListener(map, 'zoom_changed', function() {

var rectOptions = {

strokeColor: "#0000FF",

strokeOpacity: 0.8,

strokeWeight: 2,

fillColor: "#0000FF",

fillOpacity: 0.35,

map: map,

bounds: new google.maps.LatLngBounds( //성남 모란역

new google.maps.LatLng(37.434000, 127.128000), /* 사각형 좌하단 좌표(south west) */

new google.maps.LatLng(37.432000, 127.130000)) /* 사각형 우상단 좌표(north east) */

};

rectangle.setOptions(rectOptions);

});

}

</script>

</head>

</body>

</html>

GroundOverlay 를 이용하여 지도상의 특정 영역에 이미지 출력하기

https://developers.google.com/maps/documentation/javascript/overlays

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXje7925D-vS4CokDFm0QwB06t7VEAXVc&sensor=FALSE">

</script>

function initialize() {

var latlng = new google.maps.LatLng(37.432124,127.129064); //성남 모란역

var imageBounds = new google.maps.LatLngBounds (

new google.maps.LatLng(37.412124,127.109064), // south west

new google.maps.LatLng(37.452124,127.149064)); // north east

var mapOptions = {

zoom: 13,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var imgOverLay = new google.maps.GroundOverlay( "moran.jpg", imageBounds);

imgOverLay.setOpacity(0.6);

imgOverLay.setMap(map);

}

</script>

</head>

</body>

</html>

웹브라우저의 IP 주소를 이용하여 지리정보를 구하는 예

원문참조: https://developers.google.com/maps/articles/geolocation#DetectingUserLocation

var initialLocation;

var siberia = new google.maps.LatLng(60, 105);

var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);

var browserSupportFlag = new Boolean();

function initialize() {

var myOptions = {

zoom: 6,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

// Try W3C Geolocation (Preferred)

if(navigator.geolocation) {

browserSupportFlag = true;

navigator.geolocation.getCurrentPosition(function(position) {

initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

map.setCenter(initialLocation);

}, function() {

handleNoGeolocation(browserSupportFlag);

});

}

// Browser doesn't support Geolocation

else {

browserSupportFlag = false;

handleNoGeolocation(browserSupportFlag);

}

function handleNoGeolocation(errorFlag) {

if (errorFlag == true) {

alert("Geolocation service failed.");

initialLocation = newyork;

} else {

alert("Your browser doesn't support geolocation. We've placed you in Siberia.");

initialLocation = siberia;

}

map.setCenter(initialLocation);

}

저작자표시

Programming

Google Maps API

티스토리툴바