반응형
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// 브라우저별 XMLHttpRequest 생성
createXHR = function(){
var XHR = null;
//XMLHttpRequest 를 생성한다.
if(window.XMLHttpRequest){
//IE를 제외한 브라우저
var XHR = new XMLHttpRequest() ;
} else if(window.ActiveXObject){
//Win IE4+
try {
var XHR = new ActiveXObject("Msxml2.XMLHTTP") ;
} catch (e) {
try {
var XHR = new ActiveXObject("Microsoft.XMLHTTP") ;
} catch (e2) {
//var XHR = null;
alert('ERROR:createXHR 1');
return XHR;
}
}
}else {
// XMLHttpRequest를 지원하지 않는 경우
//var XHR = null;
alert('ERROR:createXHR 2');
return XHR;
}
return XHR;
}
//html과 같은 디렉토리 안에 있는 xml 파일을 불러와 값을 사용한다.
function f_xml(){
var client = createXHR();
var xmlText="";
var marker = new Array();
client.open("GET", "phpsqlajax_expectedoutput.xml",false);
client.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200) {
//서버 데이터 처리가 완료된경우 4 , 200
if(this.responseXML != null && this.responseXML.documentElement.getElementsByTagName('marker')){
xmlText = this.responseXML;
}else{
//
}
} else if (this.readyState == 4 && this.status != 200) {
//로컬 상에서는 status == 0 이다.
if(this.responseXML != null && this.responseXML.documentElement.getElementsByTagName('marker')){
xmlText = this.responseXML;
}
}
var markers = xmlText.documentElement.getElementsByTagName("marker");//alert(markers.length);
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
marker[i] = createMarker(point, name, address, type);
}
};
client.send();
return marker;
}
// 사용자 아이콘 지정
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 13);
/*
* 구글에서 지원하는 xml파일을 불러오는 함수..
GDownloadUrl("phpsqlajax_expectedoutput.xml", function(data, responseCode){
var xml = GXml.parse(data);
var makers = xml.documentElement.getElementByTagName("marker");
for(var i=0;i<marker.length;i++){
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(createMarker(point, markers[i].getAttribute("name"), markers[i].firstChild.nodeValue));
}
//document.getElementById("side_bar").innerHTML = side_bar_html;
});
*/
var marker = new Array();
marker = f_xml();
for(var i=0;i<marker.length;i++){ map.addOverlay(marker[i])};
// 사용자 브라우저 확인
document.getElementById('browser').innerHTML = navigator.userAgent;
if(navigator.userAgent.indexOf('iPhone') != -1){//처리할 코드
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px" title="Google Map"></div>
<div><p id="browser" title="browser">browser</p></div>
</body>
</html>
phpsqlajax_expectedoutput.xml728x90
반응형
BIG
'Programming > Web' 카테고리의 다른 글
| google map & tabs with jquery (0) | 2012.02.10 |
|---|---|
| 모바일웹 - 가로보기, 세로보기 (0) | 2012.02.10 |
| JavaScript, jQuery, AJAX 강좌 모음 (0) | 2012.01.16 |
| 스마트폰(모바일)용 웹 자동이동 (0) | 2012.01.12 |
| 실전 HTML5 가이드 / 실전 웹표준 가이드 (0) | 2011.11.04 |
댓글