飯田橋のBrasserie de L’institutを表示してみましょう。
住所は、東京都新宿区市谷船河原町15。
google map apiのjsonでlat, lngを取得します。
jsのマップを表すクラスはMap, centerとzoomは必須。
callbackで、apiを読み込んだ後のinitMap()実行を指定しています。
<?php
$name = "Brasserie de L'institut";
$address = '東京都新宿区市谷船河原町15';
function urlencode_rfc3986($str){
return str_replace('%7E','~', rawurlencode($str));
}
$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 ." " .$lng;
?>
<!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(){
map = new google.maps.Map(document.getElementById('map'),{
center:{lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>},
zoom: 16
});
}
</script>
<script async defer
src = "https:maps.googleapis.com/maps/api/js?key=hogehoge&callback=initMap">
</script>
</body>
</html>
var markerを追加して、ラベルを付与できる。
var map;
function initMap(){
var position = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
map = new google.maps.Map(document.getElementById('map'),{
center: position,
zoom: 16
});
var marker = new google.maps.Marker({
position: position,
map: map
});
}
