次のコードがあり、正常に動作しますが、マーカー/ポイントを追加する方法がわかりません。誰かが私を助けてくれますか、よろしくお願いします!
<?php
// Get the JSON - THIS CODE WILL CONVERT CITY,STATE INTO LAT/LNG.
$url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
$source = file_get_contents($url);
$obj = json_decode($source);
$LATITUDE = $obj->results[0]->geometry->location->lat;
$LNG = $obj->results[0]->geometry->location->lng;
echo ('LAT: ').$LATITUDE;
echo ('<BR>LNG: ').$LNG;
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function load(){
var point = new google.maps.LatLng(<?php echo ($LATITUDE); ?>, <?php echo ($LNG); ?>);
var myMapOptions = {
zoom: 4,
center: point,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),myMapOptions);
var image = new google.maps.MarkerImage(
'marker-images/image.png',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(62,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape = {
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
};
var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
map: map,
position: point
});
}
</script>
</head>
<body onload="load()">
<div id="map" style="width:900px;height:500px;margin:40px auto;"></div>
</body>
</html>
更新:これは私も試したものです(助けを借りて:hansvedo):
<?php
// Get the JSON
$url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
$source = file_get_contents($url);
$obj = json_decode($source);
$LATITUDE = $obj->results[0]->geometry->location->lat;
$LNG = $obj->results[0]->geometry->location->lng;
$url2='http://maps.googleapis.com/maps/api/geocode/json?address=Akron+OH&sensor=false';
$source2 = file_get_contents($url2);
$obj2 = json_decode($source2);
$LATITUDE2 = $obj2->results[0]->geometry->location->lat;
$LNG2 = $obj2->results[0]->geometry->location->lng;
echo ('LAT: ').$LATITUDE;
echo ('<BR>LNG: ').$LNG;
echo ('<BR><BR>');
echo ('LAT: ').$LATITUDE2;
echo ('<BR>LNG: ').$LNG2;
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function load(){
var point = new google.maps.LatLng('LATITUDE', 'LNG');
var point2 = new google.maps.LatLng('LATITUDE2', 'LNG2');
var myMapOptions = {
zoom: 5,
center: point,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),myMapOptions);
var image = new google.maps.MarkerImage(
'marker-images/image.png',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(62,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape = {
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
};
// var marker = new google.maps.Marker({
// draggable: true,
// raiseOnDrag: false,
// icon: image,
// shadow: shadow,
// shape: shape,
// map: map,
// position: point
// });
var marker = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point });
var marker2 = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point2 });
}
</script>
</head>
<body onload="load()">
<div id="map" style="width:900px;height:500px;margin:40px auto;"></div>
</body>
</html>