구글 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 구글 지도 API 키를 해당 홈페이지 (http://code.google.com/apis/maps/) 에서 얻을 수 있으며 키 값($google_map_api_key)을 얻은 API 키로 대입해야 합니다.
[실행 화면] http://www.hompydesign.com/map/
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/580
(0) 
(0)
[실행 화면] http://www.hompydesign.com/map/
[소스 코드]
<HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<?=$google_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new google.maps.Map2($("#map_canvas")[0]);
map.disableDoubleClickZoom();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(current_lat, current_lon), current_zoom);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new GLatLng(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new GIcon(G_DEFAULT_ICON);
if (person) {
icon.image = "images/marker"+(person%10)+".png";
icon.iconSize = new GSize(20,34);
}
var marker = new GMarker(point,{'icon': icon});
marker.person = person;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<img src="/hompydesign.com?seq='+person+'" width=140 height=100>');
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE><?=$hompy_title?></TITLE>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<?=$google_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
</style>
<script type='text/javascript'>
<!--
var map = null;
var current_lon = 127.046;
var current_lat = 37.5066;
var current_zoom = 14;
var person_list = [];
$(document).ready(function(){
display_loading();
map = new google.maps.Map2($("#map_canvas")[0]);
map.disableDoubleClickZoom();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(current_lat, current_lon), current_zoom);
display_marker({user:0,lat:current_lat,lon:current_lon});
for (record in person_list) {
display_marker(person_list[record]);
}
setTimeout(display_loaded, 1000);
});
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
function display_marker(record){
with (record) {
var point = new GLatLng(Number(lat),Number(lon));
var marker = create_marker(point, user);
}
map.addOverlay(marker);
//map.setCenter(point, current_zoom, G_NORMAL_MAP);
}
function create_marker(point, person) {
var icon = new GIcon(G_DEFAULT_ICON);
if (person) {
icon.image = "images/marker"+(person%10)+".png";
icon.iconSize = new GSize(20,34);
}
var marker = new GMarker(point,{'icon': icon});
marker.person = person;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<img src="/hompydesign.com?seq='+person+'" width=140 height=100>');
});
return marker;
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
-->
</script>
</HEAD>
<BODY>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</BODY>
</HTML>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/580
(0) (0)
Copyright ⓒ
댓글을 달아 주세요
저 이거 블로그에 쓰고싶은데요 블로그 html로하면 헤드부분을 못쓰는데 어떻게해요?
헤드에 있는거 그냥 바디에 넣으셔도 상관 없습니다.
<script type="text/javascript" src="/js/jquery.js"></script>
이 부분의 jquery.js 파일은 제 홈페이지 안에 있어야 하는 파일인가요?
저도 궁금한데 jquery.js 파일은 뭐죠??
아 웹.. 초보인데 어딜가도 명쾌한 해답을 해주는 곳이 없네요 ㅠ
jQuery 에 대해서 궁금하신 분들은 jQuery 관련 게시물과 jQuery 문서를 참고하세요.
http://hompy.info/tag/jQuery
http://docs.jquery.com/
이거 스크랩 해가도 되나요? ^^
출처는 당연히 남기구요..
사용해봤는데 일부러 고쳐서쓰라고 제대로 작동안되게 하신건가요?
실수한건 아닌것 같고 일부러 그러신것 같네요
다른사람이 노력해서 얻은 결과물을 아무 노력없이 얻으려는 마음은
조금 없지않아 있지만 적어도 고쳐서 쓰라고 얘기는 해줬으면 좋겠네요
한번 사용해 봤습니다. 다른곳엔 쓰지 않겠습니다