-1
私はこのウェブサイトからチュートリアル以下、XML文書からのデータを使用して、GoogleのAPIマップにマーカーを追加しようとしています： https://developers.google.com/maps/documentation/javascript/mysql-to-mapsXML構文解析Google MapsのAPIトラブル
私が使用していますxmlファイルを以下に掲載されています。
<!--
- phpMyAdmin XML Dump
- version 4.7.0
- https://www.phpmyadmin.net
-
- Host: 127.0.0.1
- Generation Time: Aug 04, 2017 at 03:20 AM
- Server version: 10.1.25-MariaDB
- PHP Version: 7.1.7
-->
<pma_xml_export xmlns:pma="https://www.phpmyadmin.net/some_doc_url/" version="1.0">
<!--
- Structure schemas
-->
<pma:structure_schemas>...</pma:structure_schemas>
<!--
- Database: 'aogcc test'
-->
<database name="aogcc test">
<!-- Table markers -->
<table name="markers">
<column name="markers_id">1</column>
<column name="API_WellNo">50009100010000</column>
<column name="PermitNumber">1630190</column>
<column name="OpNo">136555</column>
<column name="WellName">ROMIG PARK INC</column>
<column name="WellNumber">1</column>
<column name="WellUnit">00000</column>
<column name="CurrentClass">EXP</column>
<column name="CurrentStatus">P&A</column>
<column name="CurrentDateStatus">1997-05-15 00:00:00</column>
<column name="PermitClass">EXP</column>
<column name="PermitStatus">1-OIL</column>
<column name="CompClass">EXP</column>
<column name="CompStatus">P&A</column>
<column name="DTD">11566</column>
<column name="TVD">11325</column>
<column name="Sales_Cd">NULL</column>
<column name="Actg_Grp">0</column>
<column name="Mult_Latrl">0</column>
<column name="CompNum">0</column>
<column name="Field_No">0</column>
<column name="Wh_GeoArea">820</column>
<column name="Wh_Lat">15.245</column>
<column name="Wh_Long">-152.54</column>
</table>
</database>
</pma_xml_export>
次のHTMLコードを使用する：
html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Using MySQL and PHP with Google Maps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
width: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 100;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(45.787172, -15.870226),
zoom: 2
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('http://127.0.0.1:8080/markers.xml', function(data) {
var xml = data.responseXML;
window.alert(xml)
var markers = xml.documentElement.getElementsByTagName('table name="markers"');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getElementsByTagName('column name="markers_id"');
var name = markerElem.getElementsByTagName('column name="WellName"');
var point = new google.maps.LatLng(
parseFloat(markerElem.getElementsByTagName('column name="Wh_Lat"')),
parseFloat(markerElem.getElementsByTagName('column name="Wh_Long"')));
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('click', 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_KEY&callback=initMap">
</script>
</body>
</html>
私は難しその後、GoogleマップAPIに供給するために名前、緯度と経度を取得するために、XMLファイルを介しての解析を持っていますが。
ご協力いただければ幸いです。