|
OpenAPI GoogleMap을 이용한
Web사이트 만들기(사용법)
미쓰토시
사용한 언어 : HTML
사용 도구: 메모장
목차
No1. Google MAPS API key를 취득한다
No2. 맵을 표시한다
No3. 위성지도로 표시 한다
No.4 이동이나 축척 변경용의 버튼을 표시한다
No5. 지도/위성사진변경 버튼을 표시한다
No6. 개요를 나타내는 지도 표시
No7. Message 표시
No8. Message&클릭 처리
No.9 마커를 붙인다
No1. Google MAPS API key를 취득한다
Google MAPS API를 사용하기 위해서는, Google MAPS API의 키가 필요하다
key는, Google MAPS API의 페이지로부터 취득할 수 있다
( http://code.google.com/intl/ko-KR/apis/maps/index.html )
No2. 맵을 표시한다
메모장에 아래의 코드(기본코드)를 입력한다
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=API Key"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:300px; height:300px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1. [API Key] 부분에 자기 Google MAPS API 를 입력 한다
#2. [charset="utf-8"] 는 한구어를 사용할 때 있으면 좋겠다
#3. [style="width:300px; height:300px] 부분은 Browser에 표시하는 사이즈
#4. [map.setCenter(new GLatLng(
36.033333, 139.15),
11)
] 의 < GLatLng(
36.033333, 139.15)
>부분은 위도/경도이고
경도는 동쪽이 + (플러스), 서쪽이 - (마이너스)의 값이 된다.
위도는 북쪽이 +에서 남쪽이 -의 값이 된다
setCenter의 두 번째의 인수(11)는 Zoom도(축척/배율)이다
[실행 화면]
No3. 위성지도로 표시 한다
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:450px; height:400px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.033, 139.15), 11);
map.setMapType(G_SATELLITE_MAP);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
#2 G_SATELLITE_MAP라고 하는 부분을 G_NORMAL_MAP로 하면 통상의 지도가 된다
#3 G_HYBRID_MAP로 하면, 지도+위성 사진의 하이브리드 표시가 된다
[실행 화면]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:450px; height:400px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(36.033333, 139.15), 11);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 450px; height: 400px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(36.033333, 139.15), 11);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
No6. 개요를 나타내는 지도 표시 (GOverviewMapControl)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:450px; height:400px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(36.033333, 139.15), 11);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
No7. Message 표시
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:500px; height:450px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("openInfoWindow Test"));
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
No8. Message&클릭 처리
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:500px; height:450px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GPoint(37.441944, -122.141944), 13);
}
GEvent.addListener(map, 'click', function(overlay, point) {
if (point) {
map.openInfoWindow(point,
document.createTextNode("clicked"));
}
});
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
No.9 마커를 붙인다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps xxxxxxJavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/xxxxxxjavascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width:500px; height:450px"></div>
<script type="text/xxxxxxjavascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(36.03, 139.15);
map.setCenter(point, 10);
var mp = new GLatLng(point.lat() + 0.1, point.lng() + 0.1);
var marker = new GMarker(mp);
map.addOverlay(marker);
}
//]]>
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#1 강조되어 있는 부분이 지도를 위성 표시로 하고 있는 부분이다
[실행 화면]
OpenAPI GoogleMap을 이용한 사이트 만들기.docx
|