구글 지도 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)