なんとなく、それらしいものができてきました。中心のポジションは、緯度経度の平均を取ってます。
あ、array_sum, countでできますね。
$lat_a = array_sum($lat)/count($lat);
$lng_a = array_sum($lng)/count($lng);
<?php
$resutaurant = array(
"Brasserie de L'institut" => "東京都新宿区市谷船河原町15",
"Le Mange-Tout" => '東京都新宿区納戸町22'
);
function urlencode_rfc3986($str){
return str_replace('%7E','~', rawurlencode($str));
}
$i = 0;
foreach($resutaurant as $name => $address){
$encode_address = urlencode_rfc3986($address);
$url = 'http://maps.google.com/maps/api/geocode/json?address='. $encode_address.'&sensor=false';
$json = file_get_contents($url);
$obj = json_decode($json,true);
$lat[] = $obj["results"]["0"]["geometry"]["location"]["lat"];
$lng[] = $obj["results"]["0"]["geometry"]["location"]["lng"];
echo $name ." ".$address .'<br>';
echo $lat[$i] ." " .$lng[$i]. "<br>";
$rname[] = $name;
$i++;
}
$lat_a = ($lat[0]+$lat[1])/2;
$lng_a = ($lng[0]+$lng[1])/2;
?>
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 50%;
margin-top: 10px;
}
html, body {
height: 100%;
margin: 10px;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap(){
var position = {lat: <?php echo $lat_a; ?>, lng: <?php echo $lng_a; ?>};
map = new google.maps.Map(document.getElementById('map'),{
center: position,
zoom: 16
});
var labels = ["<?php echo $rname[0]; ?>","<?php echo $rname[1]; ?>"];
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i]
});
});
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: <?php echo $lat[0]; ?>, lng: <?php echo $lng[0]; ?>},
{lat: <?php echo $lat[1]; ?>, lng: <?php echo $lng[1]; ?>}
]
</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=hogehogek&callback=initMap">
</script>
</body>
</html>
