Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

붓, 그리다

XML 문서 내 좌표 값 지도에 표시하기 본문

Google Map

XML 문서 내 좌표 값 지도에 표시하기

붓그린 2017. 8. 29. 10:59

오라클 데이터를 XM L문서로 출력한 파일 내 정보를 지도 상에 뿌려주기



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="db.*, java.util.*, java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
 
%>
<html>
    <head>        
        <title> GoogleMap </title>
        <meta charset="utf-8">  
      
        <style>
            body{
                width: 100%; height: 100%;}
            #map, #map2{
                width: 1000px;
                height: 700px;
            }            
        </style>
        
    </head>
    <body>
        
        <h1> DB에서 여러개 좌표 가져오기 </h1>
        <div id="map">        
        </div>    
 
 
        <hr>
   <script>
      var customLabel = {
        A01: {
          label: 'R'
        },
        A02: {
          label: 'B'
        },
        A07: {
          label:'C'
        }
      };
 
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(33.250467, 126.563636),
          zoom: 11
        });
        var infoWindow = new google.maps.InfoWindow;
 
          // Change this depending on the name of your PHP or XML file
          downloadUrl('http://localhost:8090/FinalProject/xml/output.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('addr');
              var type = markerElem.getAttribute('loctype');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));
 
              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
 
              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('mouseover', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }
 
 
 
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
 
        request.open('GET', url, true);
        request.send(null);
      }
 
      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=사용자api키&callback=initMap">
    </script>
        
    </body>
</html>
 
cs




저작자표시 비영리 변경금지

'Google Map' 카테고리의 다른 글

오라클 DB상에 있는 데이터 XML 문서로 만들기 2  (0) 2017.08.29
오라클 DB상에 있는 데이터 XML 문서로 만들기 1  (0) 2017.08.29
공유하기 링크
'Google Map' Related Articles more
Comments