이제까지 정리한 구글맵 API와 마우스 위치 얻는 방법을 이용해 간단한 예제를 하나 만들어 보자
예제의 전체 소스는 아래와 같다.
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
[CODE type=javascript]
<HTML>
<HEAD>
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var map;
var isIE;
var eventValue;
var state;
function checkIE()
{
if (navigator.appName == "Microsoft Internet Explorer")
isIE = true;
else
isIE = false;
}
function startMouseCapture(objCapture)
{
if ( isIE == true )
objCapture.setCapture();
}
function endMouseCapture(objCapture)
{
if ( isIE == true )
{
objCapture.releaseCapture();
}
hideMap();
}
function SaveMouseEvent(e)
{
eventValue = e;
}
function initMouseCapture()
{
checkIE();
if (isIE == false)
{
document.addEventListener('mousemove',SaveMouseEvent,false);
}
}
function createMarker(point, msg)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Message: <b>" + msg + "</b>");
});
return marker;
}
function showMap(a, b, msg)
{
var x, y;
if ( isIE == false )
{
x = eventValue.pageX;
y = eventValue.pageY;
}
else
{
x = event.x;
y = event.y;
}
var divLayer = document.getElementById('gmap');
var latLng = new GLatLng(a, b);
divLayer.style.display='';
divLayer.style.left = x + 1;
divLayer.style.top = y + 1;
if ( map )
{
map.panTo(latLng);
map.clearOverlays();
var point = map.getCenter();
map.addOverlay(createMarker(point, msg));
}
else
{
map = new GMap2(divLayer);
map.setCenter( new GLatLng(a, b), 13);
map.disableDragging();
map.setMapType(G_SATELLITE_MAP);
var point = map.getCenter();
map.addOverlay(createMarker(point, msg));
}
}
function hideMap()
{
var divLayer = document.getElementById('gmap');
divLayer.style.display='none';
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="initMouseCapture();">
<div id=bg>
집 : 의정부 <img id=1 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);"onmousemove="showMap(37.725447,127.053452, '우리집')"><br>
직장 : <A HREF="http://www.wincom.co.kr" target="_blank">윈컴</A> <img id=2 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.479762,126.882563, '윈컴')"><br>
파견 : <A HREF="http://www.feelingk.com" target="_blank">필링크</A> <img id=3 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.484462,126.894665, '필링크')"><br>
</div>
<div id="gmap" style="display:none; width:400px; height:300px; position:absolute;"></div>
</BODY>
</HTML>
[/CODE]
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
이제까지의 내용을 기본으로 한 소스이기 때문에 내용이 어렵지 않을 것이다. 소스에 대한 별도의 설명을 하지 않겠다. 실행 결과는 아래와 같다. 최초 화면은 아래와 같다.
MAP이라는 이미지 위에 마우스를 올려 놓은 결과는 아래와 같다.
불행이도 예제로 사용한 곳이 모두 세부 위성사진이 제공 하지 않는 지점이였다.
( 저와 관련 있는 장소들이 다 이렇네요.. ㅡㅡ; )
이상으로 구글맵 API에 관한 내용을 마무리 하겠습니다.
덧글, 이 예제를 만드는데, 한참 삽질 했네요. IE에서는 정상적으로 동작을 하는데, FF에서 자꾸 hideMap()함수가 호출되는 것입니다. 한참을 삽질하다가 결과 레이어가 현재 마우스 포인터와 같아서 onmouseover이벤트와 onmouseout이벤트가 계속 일어나는 것이였네요, 결과 레이어 좌표를 +1 해주고 간단히 해결 했습니다.
[CODE type=javascript]
<HTML>
<HEAD>
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var map;
var isIE;
var eventValue;
var state;
function checkIE()
{
if (navigator.appName == "Microsoft Internet Explorer")
isIE = true;
else
isIE = false;
}
function startMouseCapture(objCapture)
{
if ( isIE == true )
objCapture.setCapture();
}
function endMouseCapture(objCapture)
{
if ( isIE == true )
{
objCapture.releaseCapture();
}
hideMap();
}
function SaveMouseEvent(e)
{
eventValue = e;
}
function initMouseCapture()
{
checkIE();
if (isIE == false)
{
document.addEventListener('mousemove',SaveMouseEvent,false);
}
}
function createMarker(point, msg)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Message: <b>" + msg + "</b>");
});
return marker;
}
function showMap(a, b, msg)
{
var x, y;
if ( isIE == false )
{
x = eventValue.pageX;
y = eventValue.pageY;
}
else
{
x = event.x;
y = event.y;
}
var divLayer = document.getElementById('gmap');
var latLng = new GLatLng(a, b);
divLayer.style.display='';
divLayer.style.left = x + 1;
divLayer.style.top = y + 1;
if ( map )
{
map.panTo(latLng);
map.clearOverlays();
var point = map.getCenter();
map.addOverlay(createMarker(point, msg));
}
else
{
map = new GMap2(divLayer);
map.setCenter( new GLatLng(a, b), 13);
map.disableDragging();
map.setMapType(G_SATELLITE_MAP);
var point = map.getCenter();
map.addOverlay(createMarker(point, msg));
}
}
function hideMap()
{
var divLayer = document.getElementById('gmap');
divLayer.style.display='none';
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="initMouseCapture();">
<div id=bg>
집 : 의정부 <img id=1 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);"onmousemove="showMap(37.725447,127.053452, '우리집')"><br>
직장 : <A HREF="http://www.wincom.co.kr" target="_blank">윈컴</A> <img id=2 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.479762,126.882563, '윈컴')"><br>
파견 : <A HREF="http://www.feelingk.com" target="_blank">필링크</A> <img id=3 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.484462,126.894665, '필링크')"><br>
</div>
<div id="gmap" style="display:none; width:400px; height:300px; position:absolute;"></div>
</BODY>
</HTML>
[/CODE]
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
이제까지의 내용을 기본으로 한 소스이기 때문에 내용이 어렵지 않을 것이다. 소스에 대한 별도의 설명을 하지 않겠다. 실행 결과는 아래와 같다. 최초 화면은 아래와 같다.
MAP이라는 이미지 위에 마우스를 올려 놓은 결과는 아래와 같다.
불행이도 예제로 사용한 곳이 모두 세부 위성사진이 제공 하지 않는 지점이였다.
( 저와 관련 있는 장소들이 다 이렇네요.. ㅡㅡ; )
이상으로 구글맵 API에 관한 내용을 마무리 하겠습니다.
덧글, 이 예제를 만드는데, 한참 삽질 했네요. IE에서는 정상적으로 동작을 하는데, FF에서 자꾸 hideMap()함수가 호출되는 것입니다. 한참을 삽질하다가 결과 레이어가 현재 마우스 포인터와 같아서 onmouseover이벤트와 onmouseout이벤트가 계속 일어나는 것이였네요, 결과 레이어 좌표를 +1 해주고 간단히 해결 했습니다.
반응형
'Dev > Google Map' 카테고리의 다른 글
| 5. 맵에 마크 하기 & 이벤트 처리 (0) | 2006.05.22 |
|---|---|
| 4. 콘트롤을 올려보자. (0) | 2006.05.22 |
| 3. 간단한 구글 맵을 예제 (0) | 2006.05.22 |
| 2. 인증키를 받자. (0) | 2006.05.22 |
| 1. 구글 맵 API란? (1) | 2006.05.22 |