例のコードをしたい、テストしてください。
markers.php
<?php
$p = [
['lat'=>-37.774785, 'lng'=> 145.137978],
['lat'=>-37.819616, 'lng'=> 144.968119],
['lat'=>-38.330766, 'lng'=> 144.695692],
['lat'=>-39.927193, 'lng'=> 175.053218],
['lat'=>-41.330162, 'lng'=> 174.865694],
['lat'=>-42.734358, 'lng'=> 147.439506],
['lat'=>-42.734358, 'lng'=> 147.501315],
];
echo json_encode($p);
markers.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var arr = JSON.parse(xhr.responseText);
if(Array.isArray(arr)){
locations = arr;
}
}
}
xhr.open('GET', 'markers.php', true);
xhr.send();
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script>
</body>
</html>
又は二方法:
markers.php
<?php
$p = [
['lat'=>-37.774785, 'lng'=> 145.137978],
['lat'=>-37.819616, 'lng'=> 144.968119],
['lat'=>-38.330766, 'lng'=> 144.695692],
['lat'=>-39.927193, 'lng'=> 175.053218],
['lat'=>-41.330162, 'lng'=> 174.865694],
['lat'=>-42.734358, 'lng'=> 147.439506],
['lat'=>-42.734358, 'lng'=> 147.501315],
];
return json_encode($p);
markers_html.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = <?=include("markers.php");?>;
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkUrEm_U0QWg1QNryI1O5FpB0xAvffJ7I&callback=initMap"></script>
</body>
</html>
なぜ配列が必要ですか? 2つの値を文字列に渡すだけです。 – Stuart
エラーレスポンスがJSON形式でないためにエラーが発生した場合はどうなりますか?私はあなたがクエリーに失敗した箇所を参照しています。\ n "' –
xhr.responseTextの内容をconsole.log()して結果をここに貼り付けることはできますか? – Logar